jquery - 添加取消上传或中止功能以引导多个文件上传插件

Question

我正在使用引导多文件上传插件来上传文件。我正在使用此链接上的示例。现在我想在“添加文件”按钮之外添加另一个按钮“取消上传”。单击“取消上传”按钮后，应停止上传过程。请帮我解决这个问题。谢谢

Answer 1

最后，经过大量的试验和错误并搜索相关的代码解决方案，我得到了它完全按照我想要的方式工作！我在插件的 github 问题页面上发布了我的查询，并从那里获得了帮助。

下面是真正有效的代码示例：

1.首先你要绑定fileuploadadd事件：

$('#fileupload').bind('fileuploadadd', function(e, data){
      var jqXHR = data.submit(); // Catching the upload process of every file
      $('#cancel_all').on('click',function(e){
            jqXHR.abort();
      });
});

2.然后你必须绑定点击“取消上传”按钮时将调用的取消事件，这将取消当前正在上传的所有文件：

$('#fileupload').bind('fileuploadfail', function(e, data){
    if (data.errorThrown === 'abort')
    {
        //PUT HERE SOME FEEDBACK FOR THE USER
    }
});

Answer 2

我想你可以从这里的插件文档中找到你的答案，我在这里发布代码：

var jqXHR = $('#fileupload').fileupload('send', {files: filesList})
    .error(function (jqXHR, textStatus, errorThrown) {
        if (errorThrown === 'abort') {
            alert('File Upload has been canceled');
        }
    });
$('button.cancel').click(function (e) {
    jqXHR.abort();
});

上面的代码意味着以编程方式（手动）上传文件。在这种情况下，对于 fileupload 函数，第二个参数必须是具有 File 或 Blob 对象的数组（或类似数组的列表）作为 files 属性的对象。因此，在执行上述代码之前，您需要获取 files 数组：

var filesList = $("#fileupload").get().files;

我不确定您是否需要将 FileList 转换为如下所示的数组，但您可以尝试：

var i,files = $("#fileupload").get().files,filesList=[];
for(i=0;i<files.length;i++){
    filesList.push(files.item(i))
}

但请注意，这里有一些限制：文件仅支持 IE10+ 和其他现代浏览器。

有关更多信息，我在这里列出了一些文章：

1. jQuery-File-Upload 程序化文件上传
2. 使用来自 Web 应用程序的文件
3. 文件列表 API