Play Framework:Ajax + Drag和'Drop + File Upload + File对象在控制器中?

时间:2011-02-01 19:22:13

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

是否有人知道通过Ajax上传文件并使用支持PlayFramework将文件上传转换为File对象的桌面拖放的方法?

我尝试了几种不同的方法,但没有一种方法可以正常工作。

3 个答案:

答案 0 :(得分:22)

这是我成功的尝试:

修改路线文件并添加

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

我在不同的浏览器中测试过它至少对我有用。玩里亚德的积分!邮件列表谁向我暗示了request.body

P.S:我正在使用我之前发表的评论

修改 代码的答案已按照T.J.的指示添加。克劳德,我同意:)

答案 1 :(得分:1)

简单的上传部分(不是拖放而只是点击“上传文件”)不适用于Ie7&amp; 8(不要尝试其他人)

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

答案 2 :(得分:0)

不确定这是否有资格作为答案,因为我不百分之百确定它会起作用。但它应该工作:)

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

我使用直接的jquery ajax帖子得到了第二部分。收到的文件很好。对于第一部分,我尝试使用html 5中的dnd支持(向下滚动到拖动文件):

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