使用jquery fileupload basic以编程方式删除文件

我正在使用blueimp文件上传插件（基本版）来实现多文件上传。 我正在尝试实现允许用户删除排队文件以进行上载的function。 我无法弄清楚如何正确访问文件数组。 每次在add回调中，索引为0，文件数组长度为1（它只包含用户单击要删除的文件）。 我正在为每个排队到div的文件添加一个链接，这个文件是可点击的，如果点击则应删除该文件。

我的想法只是创建一个删除链接与文件的索引并从数组中删除它，但由于上述问题，索引永远不会正确。 我也尝试过文件名，但是“on”回调中的文件名始终是第一个被选中上传的文件 – 我必须弄清楚一些关闭范围。

如何以编程方式从上载队列中删除文件？

HTML：

并且文件上传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("
Remove
" + file.name + "
") .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(); }); }); 

Answer 1

我解决了这个问题 这是解释说明：

经过修补后我找到了解决方案。 关键是要记住我正在回电话。 所以在删除function的事件处理程序中，我只是将data.files数组清零，并且在该处理程序的提交中，我只提交文件数组的长度是否大于0.我清理了事件处理函数所以这对眼睛来说更容易。 HTML没有变化。

新的JavaScript处理代码：

  $('#myForm').fileupload({ url: "/SomeUrl", dataType: 'html', add: function (e, data) { $.each(data.files, function (index, file) { var newFileDiv = $("
Remove
" + file.name + "
"); $('#uploadFilesBox').append(newFileDiv); newFileDiv.find('a').on('click', { filename: file.name, files: data.files }, 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(); } }); } }); 

Answer 2

谢谢@Furynation。

我所做的与你的方法类似。 对于我选择的每个文件，我向表中添加一行（上传前提交）。 我将此行分配给data.context以供以后使用。

请参阅： https ： //github.com/blueimp/jQuery-File-Upload/issues/3083

我的代码片段在add callback处理程序中：

  $("#upload").click(function () { if (data.files.length > 0) { data.submit(); } }); data.context.find('a').on('click',function (event) { event.preventDefault(); data.context.remove(); data.files.length = 0; }); 

这将删除表行并重置数组。

如果有更干净的方式，请告诉我。

Answer 3

适合我的多个文件 – 它检查所有文件，并且当有错误的文件是所有文件中间的文件时（例如.splice()或.lenght=0 ），它不会中断。 想法是：做validation– >如果错误：标记文件索引有错误– >所有文件/上传之前：删除/删除错误索引/文件$.grep() – >将好文件一起上传singleFileUploads: false 。

 $(this).fileupload({ // ... singleFileUploads: false, // << send all together, not single // ... add: function (e, data) { // array with all indexes of files with errors var error_uploads_indexes = []; // when add file - each file $.each(data.files, function(index, file) { // array for all errors - in example is only one: size var uploadErrors = []; // ... validation // check size if(data.files[index]['size'] > 1048576) { uploadErrors.push('Filesize is too big'); }; // ... // when errors if(uploadErrors.length > 0) { // mark index of error file error_uploads_indexes.push(index); // alert error alert(uploadErrors.join("\n")); }; }); // << each // remove indexes (files) with error data.files = $.grep( data.files, function( n, i ) { return $.inArray(i, error_uploads_indexes) ==-1; }); // if are files to upload if(data.files.length){ // upload by ajax var jqXHR = data.submit().done(function (result, textStatus, jqXHR) { //... alert('done!') ; // ... }); } // }, // ... }); // << file_upload