Я использую плагин для загрузки файла blueimp (базовая версия) для реализации многофайловой загрузки. Я пытаюсь реализовать функции, позволяющие пользователю удалять файлы в очереди для загрузки. Я не могу понять, как обращаться к массиву файлов соответствующим образом. Каждый раз в обратном вызове add, индекс равен 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();
});
});