当前位置: 首页 > 面试题库 >

PlayFramework:Ajax +拖放+文件上载+控制器中的文件对象?

井嘉胜
2023-03-14
问题内容

有谁知道一种通过Ajax上载文件并使用支持PlayFramework将文件上载转换为File对象的功能的桌面拖放功能的方法吗?

我尝试了几种不同的方法,但均无法正常工作。


问题答案:

这是我成功的尝试:

编辑路线文件并添加

POST    /upload                                 Application.upload

我们的控制器是Application,我将使用它来简化它。

编辑您的应用程序控制器类

public static void upload(String qqfile) {


if (request.isNew) {

    FileOutputStream moveTo = null;

    Logger.info("Name of the file %s", qqfile);
    // Another way I used to grab the name of the file
    String filename = request.headers.get("x-file-name").value();

    Logger.info("Absolute on where to send %s", Play.getFile("").getAbsolutePath() + File.separator + "uploads" + File.separator);
    try {

        InputStream data = request.body;


        moveTo = new FileOutputStream(new File(Play.getFile("").getAbsolutePath()) + File.separator + "uploads" + File.separator + filename);
        IOUtils.copy(data, moveTo);

    } catch (Exception ex) {

        // catch file exception
        // catch IO Exception later on
        renderJSON("{success: false}");
    }

}


renderJSON("{success: true}");
}

在app / views / Application文件夹/包中编辑您的Application.html

#{extends 'main.html' /}
#{set title:'Multiple Uploads' /}

<div id="file-uploader">
    <noscript>
        <p>Please enable JavaScript to use file uploader.</p>
        <!-- or put a simple form for upload here -->
    </noscript>

    <script>
        function createUploader(){
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader'),
                action: '/upload',
                debug: true
            });
        }

        // in your app create uploader as soon as the DOM is ready
        // don't wait for the window to load
        window.onload = createUploader;
    </script>    
</div>

编辑主布局:main.html,位于app / views文件夹/包中,并在jQuery之后添加此行

<script src="@{'/public/javascripts/client/fileuploader.js'}" type="text/javascript"></script>

最后的注意事项 请记住从AJAX Upload Valums下载脚本,请尽情享受!

您也可以在这里获取源代码。

我至少在不同的浏览器中对其进行过测试。感谢Play的Riyad!邮件列表向我暗示了request.body

PS:我使用的是我之前发表过的评论

编辑 根据TJ Crowder的指示添加了带有代码的答案,我同意:)



 类似资料:
  • 问题内容: 我正在尝试向我的SwiftUI Mac应用程序添加“拖放”手势/功能。 我想将文件从系统/桌面拖放到应用程序中。我发现它可以在常规Swift中使用。我现在正尝试在SwiftUI中执行此操作。 我在SwiftUI for Views中找到了一个函数。但是,看起来这仅适用于应用程序内部的内部手势。我想从外面拖文件。 在Swift中,您需要为拖动的类型注册NSView。 我想创建一个NSVi

  • 问题内容: 如今,我们可以将文件拖放到一个特殊的容器中,并使用XHR2上载它们。带有实时进度条等。非常酷的东西。 但是有时候我们不想要那么酷。我想要的是一次将文件拖放 到标准HTML文件输入中 :。 那可能吗?有什么方法可以从文件拖放中用正确的文件名(?)“填充”文件输入吗?(出于文件系统安全性原因,完整的文件路径不可用。) 为什么? 因为我想提交一份普通表格。适用于所有浏览器和所有设备。拖放只是

  • 本文向大家介绍跨浏览器拖放HTML文件上传?,包括了跨浏览器拖放HTML文件上传?的使用技巧和注意事项,需要的朋友参考一下 对于跨浏览器的HTML File Uploader,请使用FileDrop。它几乎可以在所有现代Web浏览器上使用。 根据官方规范- FileDrop是一个独立的跨浏览器,用于HTML5,旧版,AJAX,拖放,JavaScript文件上传

  • 该类被用于提供一个拖放交互。 代码示例 const controls = new DragControls( objects, camera, renderer.domElement ); // add event listener to highlight dragged objects controls.addEventListener( 'dragstart', function ( eve

  • 作为桌面程序,当然希望能够实现操作系统的 drag & drop 功能。 很多网站已经支持拖拽文件 Electron 当然也支持 要在 app 中实现此功能 ,你需要在 Render 进程中调用webContents.startDrag(item) API, 此API会给 Main 进程发送一个ondragstart事件。 在 Render 进程中, 接收 ondragstart 事件并发送消息到

  • 概览 作为桌面程序,当然希望能够实现操作系统的 drag & drop 功能。 很多网站已经支持拖拽文件, Electron 当然也支持 要在您的应用中实现此功能,您需要调用 webContent.startDrag(item) API 响应 ondragstart 事件。 示例 一个演示如何动态创建要从窗口中拖出的文件的示例。 Preload.js 在 preload.js 中使用 contex