添加取消上传或中止function以引导多个文件上传插件

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

最后,经过大量的试验和错误以及搜索相关的代码解决方案后,我才能按照我想要的方式工作! 我在插件的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 } }); 

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

 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 

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

有关更多信息,请在此处列出一些文章:

  1. jQuery-File-Upload程序化文件上传
  2. 使用Web应用程序中的文件
  3. FileList API
Interesting Posts