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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13011716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 17:37:47  来源:igfitidea点击:

jQuery File Upload - how to recognise when all files have uploaded

javascriptjqueryjquery-pluginsfile-upload

提问by Ankur

I'm using the jQuery File Upload plugin.

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

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

实际的应用程序在这里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:

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

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

回答by spuas

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).

上传停止的回调,相当于全局ajaxStop事件(但只针对文件上传请求)。

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

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

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