我正在使用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属性的对象。因此,在执行上述代码之前,您需要获得文件数组:
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+和其他现代浏览器。
有关更多信息,我在这里列出了一些文章:
- jQuery文件上传程序文件上传
- 使用web应用程序中的文件
- 文件列表API