jQuery文件上传 - 如何识别所有文件上传的时间 [英] jQuery File Upload - how to recognise when all files have uploaded

问题描述

我正在使用jQuery文件上传插件。

我希望能够在所有选定的文件上传完成后触发一个事件。到目前为止，我有一个事件，当一个文件被选中进行上传，当每个特定的文件完成上传 - 有没有办法检测到所有选定的文件已经完成上传？

实际的应用程序在这里 http://repinzle-demo.herokuapp.com/upload

我的输入字段如下所示：

 < div id = fine-uploader-basicclass =btn btn-successstyle =position：relative; overflow：hidden; direction; ltr;> 
  

我的脚本代码如下所示：

 <脚本> 
 $（function（）{
 $（'＃fileupload'）。fileupload（{
 dataType：'json'，
 add：function（e，data）{//选择文件时，列出要上传的文件
 $ .each（data.files，function（index，file）{
 $（'< p />'）。text ...+ file.name）.appendTo（＃fileList）; 
}）; 
 data.submit（）; 
}，
完成：function（e ，data）{//当文件上传时，列出名称
 $ .each（data.files，function（index，file）{
 $（'< p />'）。 （Upload complete ...+ file.name）.appendTo（＃fileList）; 
}）; 
} 
}）; 
}）; 
< / script> 
  

我正在用一个Play框架（Java）控制器来处理请求，如下所示：

publi

  c static void doUpload（File [] files）throws IOException { 
 
列表< ImageToUpload> imagesdata = new ArrayList< ImageToUpload>（）; 
 // ImageToUpload有关于将被上传的图像，名字大小等的信息。
 
 for（int i = 0; i< files.length; i ++）{
上传上传=新上传（文件[i]）; 
 upload.doit（）; //将图片上传到Amazon S3 
图片图片=新图片（files [i] .getName（））; 
 pic.save（）; //将元数据保存到MongoDB实例
 imagesdata.add（new ImageToUpload（files [i] .getName（）））; 
} 
 
 renderJSON（imagesdata）; 
 
  

解决方案

我想你正在寻找'stop'事件：
$ b $ pre $ $（'＃fileupload'）。bind（'fileuploadstop'，function（e）{/ * ...）/ / code>

在插件文档：

上传的回调停止，相当于全局ajaxStop事件
（但是仅用于文件上传请求）。

您也可以指定插件创建时的函数，将其作为参数传递给服务器：

$ $ $（'＃fileupload'）。fileupload（{
stop：function（e）{}，// .bind（'fileuploadstop'，func）;
}）;

I'm using the jQuery File Upload plugin.

I would like to be able to trigger an event when all selected files have finished uploading. So far I have an event for doing an action when a file(s) is selected for uploading and when each particular file finishes uploading - is there a way to detect that all selected files have finished uploading?

The actual app is here http://repinzle-demo.herokuapp.com/upload

My input field looks like this:

<div id="fine-uploader-basic" class="btn btn-success" style="position: relative; overflow: hidden; direction: ltr;">

My script code looks like this:

<script>
        $(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                add: function (e, data) {   // when files are selected this lists the files to be uploaded
                    $.each(data.files, function (index, file) {
                        $('<p/>').text("Uploading ... "+file.name).appendTo("#fileList");
                    });
                    data.submit();
                },
                done: function (e, data) {  // when a file gets uploaded this lists the name
                    $.each(data.files, function (index, file) {
                        $('<p/>').text("Upload complete ..."+file.name).appendTo("#fileList");
                    });
                }
            });
        });
    </script>

I am handling the request with a Play Framework (Java) controller that looks like this:

publi

c static void doUpload(File[] files) throws IOException{

        List<ImageToUpload> imagesdata = new ArrayList<ImageToUpload>();
               //ImageToUpload has information about images that are going to be uploaded, name size etc.

        for(int i=0;i<files.length;i++){
            Upload upload = new Upload(files[i]);
            upload.doit(); //uploads pictures to Amazon S3
            Picture pic = new Picture(files[i].getName());
            pic.save(); // saves metadata to a MongoDB instance
            imagesdata.add(new ImageToUpload(files[i].getName()));
        }

        renderJSON(imagesdata);
    }

解决方案

I think you are looking for 'stop' event:

$('#fileupload').bind('fileuploadstop', function (e) {/* ... */})

as said in the plugin documentation:

Callback for uploads stop, equivalent to the global ajaxStop event (but for file upload requests only).

You can also specify the function on plugin creation passing it as parameter

$('#fileupload').fileupload({
        stop: function (e) {}, // .bind('fileuploadstop', func);
    });

这篇关于jQuery文件上传 - 如何识别所有文件上传的时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！