我正在使用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();
});
});