jQuery File Upload - 如何识别所有文件何时上传答案

【问题标题】：jQuery File Upload - how to recognise when all files have uploadedjQuery File Upload - 如何识别所有文件何时上传
【发布时间】：2012-10-22 12:43:27
【问题描述】：

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

我希望能够在所有选定文件完成上传后触发事件。到目前为止，我有一个活动在选择文件以上传文件时进行操作，并且当每个特定文件完成上载时 - 有没有办法检测所有所选文件已完成上传？

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

我的输入框如下所示：

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

我的脚本代码如下所示：

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

我正在使用如下所示的 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);
    }

【问题讨论】：

标签： javascript jquery jquery-plugins file-upload

【解决方案1】：

我认为您正在寻找“停止”事件：

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

如plugin documentation中所说：

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

您也可以在创建插件时指定函数，将其作为参数传递

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

【讨论】：

这种挫败感在最初被问到 3 年后仍然存在。我看到的所有答案都没有完全解决这个问题。要在所有上传完成后仅触发 1 次“fileuploadstop”回调，您需要传递“singleFileUploads: false”选项。这将导致 1 个 XHR 请求用于所有上传，并且仅触发一次回调。其他答案：stackoverflow.com/questions/19025748/…stackoverflow.com/questions/18636845/…
大声笑。我正在尝试异步上传完成时可能会启动的整个方法列表。没想到停止事件会是使用的东西。谢谢！
@BlueWater86 我检查了你的链接，但它没有这个“sinfleFileUploads”示例，你能解释一下吗？

【解决方案2】：

这是您想要的解决方案：

$('#fileupload').on('fileuploaddone', function(e, data) {
      var activeUploads = $('#fileupload').fileupload('active');
      if (activeUploads == 1) {
          console.info("All uploads done");
      }
  });

我也遇到过这个问题，3 年前就解决了。

【讨论】：