PlayFramework：控制器中的Ajax + Drag n'Drop + File Upload + File对象 [英] PlayFramework: Ajax + Drag n' Drop + File Upload + File object in controller?

问题描述

有没有人知道通过Ajax上传文件的方法，并从支持PlayFramework的文件上传到文件对象的桌面上使用拖放功能？

我已经尝试了几种不同的方法，没有任何正常的工作。

解决方案

这是我的成功尝试：

修改路线文件并添加

  POST / upload应用程序.upload 
  

我们的控制器是应用程序，I将使用它来保持简单。

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

  public static void upload（String qqfile）{
 
 
 if（request.isNew）{
 
 FileOutputStream moveTo =空值; 
 
 Logger.info（文件名％s，qqfile）; 
 //另一种方式我用来获取文件的名称
 String filename = request.headers.get（x-file-name）。value（）; 
 
 Logger.info（绝对在哪里发送％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）{
 
 //抓取文件异常
 //捕获IO异常以后在
 renderJSON（{success：false }）; 
} 
 
} 
 
 
 renderJSON（{success：true}）; 
} 
  

在app / views /应用程序文件夹/包

 ＃{extends'main.html'/} 
＃{set title：'Multiple上传'/} 
 
< div id =file-uploader> 
< noscript> 
< p>请启用JavaScript以使用文件上传器。< / p> 
<！ - 或者放一个简单的表单上传到这里 - > 
< / noscript> 
 
< script> 
函数createUploader（）{
 var uploader = new qq.FileUploader（{
元素：document.getElementById（'file-uploader'），
 action：'/ upload' 
 debug：true 
}）; 
} 
 
 //在你的应用程序创建上传器一旦DOM准备就绪
 //不要等待窗口加载
 window.onload = createUploader; 
< / script> 
< / div> 
  

编辑主要布局：main.html，位于app / views文件夹/包并且在jQuery之后添加这一行

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

最终笔记
请记住从 AJAX上传Valums ，享受！

您还可以在这里抓住来源>。

我在不同的浏览器中测试了它，至少可以为我工作。在Riyad玩的信用！邮件列表暗示我关于 request.body

PS：我正在使用我发布的一个

修改
代码的答案已按照TJ的指示添加Crowder，我同意:)

Does anyone know of a way to upload a file via Ajax and using drag n' drop from the desktop that supports PlayFramework's ability to convert file uploads to a File object?

I've tried several different methods, and nothing works correctly.

解决方案

Here's my successful attempt:

Edit routes file and add

POST    /upload                                 Application.upload

Our controller is Application, I'll be using it to keep it simple.

Edit your Application controller class

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}");
} 

Edit your Application.html in app/views/Application folder/package

#{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>

Edit your main layout: main.html, located in the app/views folder/package and add this line after jQuery

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

Final notes Remember to download the script from AJAX Upload Valums, enjoy!

You can also grab the source here.

I tested it in different browsers it works for me at least. Credits to Riyad in Play! mailing list who hinted me about the request.body

P.S: I'm using the one I posted as a comment before

Edit The answer with code has been added as directed by T.J. Crowder, I agree :)

这篇关于PlayFramework：控制器中的Ajax + Drag n'Drop + File Upload + File对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！