jquery文件上传取消所有上传答案

【问题标题】：jquery file upload cancel all uploadsjquery文件上传取消所有上传
【发布时间】：2014-05-08 17:19:13
【问题描述】：

我正在使用 jQuery File Upload 插件 (http://blueimp.github.io/jQuery-File-Upload/) 为我的网站上传图片。

我的代码：

$('#fileupload').fileupload({
    url: 'server/index.php',
    dataType: 'json',
    dropZone: $('#dropzone')
}).on('fileuploadadd', function (e, data) {
    jqXHR = data;
});

$('button.cancel').click(function () {
jqXHR.abort();
});

当用户选择多个文件上传时，取消按钮仅取消所有文件的1个文件上传状态。

点击后如何使用取消按钮取消所有文件上传（正在进行中）？

谢谢。

【问题讨论】：

标签： javascript jquery file-upload jquery-file-upload

【解决方案1】：

摘自here

$('#fileupload').fileupload({
    add: function(e, data) {
         $('.progress_bar_wrapper').append($('.progress_context:first').clone());
        data.context = $('.progress_context:last');
        data.content.find('.abort').click(abortUpload );
        var xhr = data.submit();
        data.context.data('data',{jqXHR: xhr}); // so much data...
    }
)};

function abortUpload (e) {
     e.preventDefault();
     var template = $(e.currentTarget).closest('.template-upload'),
     data = template.data('data') || {}; // data, data , data (queue Monty Python skit)
      if (!data.jqXHR) {
        data.errorThrown = 'abort';
        this._trigger('fail', e, data);
      } else {
        data.jqXHR.abort();
      }
}

【讨论】：

感谢您的回答。无论如何不要在添加功能中使用var xhr = data.submit();？因为将其放入将绕过照片调整大小功能。我希望在上传之前调整照片大小。

【解决方案2】：

如何使用堆栈来跟踪上传？

}).on('fileuploadadd', function (e, data) {
    jqXHR.push(data);
});

$('button.cancel').click(function () {
    for (i=0; i < jqXHR.length; i++) { jqXHR[i].abort(); }
});

【讨论】：