我正在使用blueimp文件上传插件(基本版本)来实现多媒体上传.我正在尝试实现功能,允许用户删除排队的文件进行上传.我不知道如何适当地访问文件数组.每次添加回调时,索引为0,文件数组长度为1(仅包含用户单击删除的文件).我添加一个链接为每个文件排队到一个div,这是可点击的,应该删除文件,如果点击.
我的想法是创建一个删除链接与文件的索引,并将其从数组中删除,但由于上述问题,索引是永远不正确的.我也尝试过文件名,但是“on”回调中的文件名始终是第一个被选择上传的文件 – 一些关闭范围我必须弄清楚.
如何以编程方式从上传队列中删除文件?
HTML:
<div id="filebrowserWrapper">
<form id="myForm" action="#" method="post" enctype="multipart/form-data">
<input id="uploadDocbrowse" type="file" name="files[]" multiple/>
</form>
</div>
<div id="inputFilesBox"></div>
<div id="uploadFilesBox"></div>
并且文件上传JavaScript:
$('#myForm').fileupload({
url: "/SomeHandler",dataType: 'html',autoUpload: false,singleFileUploads: false,replaceFileInput: false,add: function (e,data) {
console.log("Number of files: " + data.files.length);
$.each(data.files,function (index,file) {
$('#uploadFilesBox').append("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>")
.on('click',{ filename: file.name,files: data.files },function(event) {
var uploadFilesBox = $("#uploadFilesBox");
var remDiv = $("#fileDiv_" + event.data.filename);
remDiv.remove();
event.data.files.splice(0,1);
}
});
});
data.context = $('#myButton')
.click(function () {
data.submit();
});
});
解决方法
我解决了这个这是解决方案的描述:
我找到了我的解决方案,再修改一些.关键是记得我正在回电.所以在删除功能的事件处理程序中,我只是清除了data.files数组,在提交该处理程序时,只有文件数组的长度大于0时才提交.我清理了事件处理函数眼睛更容易HTML不变.
新的JavaScript处理代码:
$('#myForm').fileupload({
url: "/SomeUrl",data) {
$.each(data.files,file) {
var newFileDiv = $("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>");
$('#uploadFilesBox').append(newFileDiv);
newFileDiv.find('a').on('click',function (event) {
event.preventDefault();
var uploadFilesBox = $("#uploadFilesBox");
var remDiv = $(document.getElementById("fileDiv_" + event.data.filename));
remDiv.remove();
data.files.length = 0; //zero out the files array
});
data.context = newFileDiv;
});
$('#myButton')
.click(function () {
if (data.files.length > 0) { //only submit if we have something to upload
data.submit();
}
});
}
});