播放框架：Ajax + 拖放 + 文件上传 + 控制器中的文件对象？答案

【问题标题】：PlayFramework: Ajax + Drag n' Drop + File Upload + File object in controller?播放框架：Ajax + 拖放 + 文件上传 + 控制器中的文件对象？
【发布时间】：2011-06-19 12:22:24
【问题描述】：

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

我尝试了几种不同的方法，但都没有正常工作。

【问题讨论】：

我得说我也解决了这个问题，就在我认为我得到解决方案时，当我查看我的上传文件夹时，它都是 0 字节文件......你在用这个吗? valums.com/ajax-upload
是的，我看过，也没有运气。

标签： ajax file-upload drag-and-drop playframework

【解决方案1】：

这是我的成功尝试：

编辑路由文件并添加

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下载脚本，享受吧！

你也可以grab the source here。

我在不同的浏览器中对其进行了测试，它至少对我有用。归功于 Riyad in Play！向我暗示request.body的邮件列表

P.S：我使用的是我之前发布的评论

编辑已按照 T.J. 的指示添加了带有代码的答案。克劳德，我同意:)

【讨论】：

是的，没有“队列”系统，虽然你必须自己实现它，它只是“放入所有文件”并上传，（或使用浏览按钮选择它们）
您应该将其保存为 sn-p，与其他游戏开发者分享：playframework.org/community/snippets
太棒了！但是，虽然到其他网站的链接对于答案可能是有用的附件，但相关代码（即使有很多）也应该包含在答案本身中.外部网站的内容可以完全改变、移动或消失。 Stack Overflow 旨在成为 OP 现在以及未来其他有问题的人的资源。更多：meta.stackexchange.com/questions/8231/…

【解决方案2】：

简单的上传部分（不是拖放只需点击“上传文件”）不适用于 Ie7 和 8（不要尝试其他 ie）

见getting Java Bad File Descriptor Close Bug while reading multipart/form-data http body

【讨论】：

【解决方案3】：

我不确定这是否可以作为答案，因为我不确定它是否会起作用。但它应该工作:)

如果我对您的理解正确，您希望将文件从桌面拖放到浏览器某处的拖放区中。这会触发对播放服务器的 ajax 上传调用。

我已经完成了第二部分的工作，使用的是直接的 jquery ajax 帖子。文件收到就好了。对于第一部分，我会尝试使用 html 5 中的 dnd 支持（向下滚动到 Dragging Files）：

http://www.html5rocks.com/tutorials/dnd/basics/

【讨论】：