jQuery文件上传 - 如何识别所有文件上传的时间

Ank*_*kur 15 javascript jquery file-upload jquery-plugins

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

我希望能够在所有选定文件上传完成后触发事件.到目前为止,我有一个事件,当选择文件上传和每个特定文件完成上传时执行操作 - 有没有办法检测所有选定的文件是否已完成上传?

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

我的输入字段如下所示:

<div id="fine-uploader-basic" class="btn btn-success" style="position: relative; overflow: hidden; direction: ltr;">
Run Code Online (Sandbox Code Playgroud)

我的脚本代码如下所示:

<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>
Run Code Online (Sandbox Code Playgroud)

我使用Play Framework(Java)控制器处理请求,如下所示:

公共区域

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);
    }
Run Code Online (Sandbox Code Playgroud)

spu*_*uas 20

我想你正在寻找'停止'事件:

$('#fileupload').bind('fileuploadstop', function (e) {/* ... */})
Run Code Online (Sandbox Code Playgroud)

插件文档中所述:

上传的回调停止,相当于全局ajaxStop事件(但仅限于文件上载请求).

您还可以在插件创建时指定将其作为参数传递的功能

$('#fileupload').fileupload({
        stop: function (e) {}, // .bind('fileuploadstop', func);
    });
Run Code Online (Sandbox Code Playgroud)

  • 在最初被问到3年后,这种挫败感仍然存在.我见过的所有答案都没有完全解决问题.对于'fileuploadstop'回调在所有上传完成后仅触发一次,您需要传递'singleFileUploads:false'选项.这将导致1个XHR请求用于所有上传,只有回调才会被触发一次.其他答案:http://stackoverflow.com/questions/19025748/finish-of-multiple-file-upload http://stackoverflow.com/questions/18636845/refreshing-the-page-after-completing-uploads-in- jQuery的多档uplaoder (3认同)