用jquery fileupload basic以编程方式删除文件 [英] Delete files programmatically with jquery fileupload basic
问题描述
我使用blueimp文件上传插件（基本版本）来实现多文件上传。我正在尝试实现功能，以允许用户删除排队的文件上传。我不知道如何适当地访问文件数组。每次在添加回调中，索引都是0，文件数组长度是1（只包含用户点击删除的文件）。我添加一个链接，每个文件排队到一个div，这是可点击的，应该删除文件，如果点击。
我的想法是只是创建一个删除链接该文件的索引并将其从数组中删除，但由于上述问题，索引是永远不会正确的。我也尝试了文件名，但在回调回调中的文件名总是第一个被选择上传的文件 - 一些封闭范围我必须弄清楚。
如何以编程方式从上传队列中删除文件？
HTML：
< div id =fileBrowserWrapper>
< form id =myFormaction =＃method =postenctype =multipart / form-data>
< input id =uploadDocBrowsetype =filename =files []multiple />
< / form>
< / div>
< div id =inputFilesBox>< / div>
< div id =uploadFilesBox>< / div>
<$ p fileupload（{$ b $ url：/ SomeHandler，
dataType：'html'，
autoUpload：false，$（$＃$） b $ b singleFileUploads：false，
replaceFileInput：false，
add：function（e，data）{
console.log（Number of files：+ data.files.length）;
$ b $ .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'>删除< / 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）;
}
}）;
}）;
$ b data.context = $（'＃myButton'）
.click（function（）{
data.submit（）;
}）;
}）;
我解决了这个问题。这里是解释说明：
我找到我的解决方案后，更多的修补。关键是记得我正在打电话回来。因此，在删除功能的事件处理程序中，我只是将data.files数组清零，并且在为该处理程序提交时，只在文件数组的长度大于0时才提交。我清理了事件处理函数在眼睛上更容易HTML不会改变。
新的JavaScript处理代码：
$（ '#myForm'）。fileupload（{
url：/ SomeUrl，
dataType：'html'，
add：function（e，data）{
$ .each （data.files，function（index，file）{
var newFileDiv = $（< div class ='uploadBox'id ='fileDiv_+ file.name +'>< div class = leftEle'>< a href ='＃'id ='link_+ index +'class ='removeFile'>删除< / a>< / div>< div class ='midEle'> + file.name +< / div>< / div>）;
$（'＃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; //清零文件数组
}）;
data.context = newFileDiv;
}）;
$ b $（'＃myButton'）
.click（function（）{
if（data.files.length> 0）{//如果我们有东西上传
data.submit（）;
}
}）;
}
}）;
I'm using the blueimp file upload plugin (the basic version) to implement multifile upload. I am trying to implement functionality to allow the user to remove queued files for upload. I cannot figure out how to access the files array appropriately. Every time in the add callback, the index is 0 and the files array length is 1 (it only contains the file the user clicked to remove). I'm adding a link for each file queued to a div, which is clickable and should remove the file if clicked.
My thought was to just create a remove link with the index of the file and remove it from the array, but because of the problem stated above, the index is never correct. I've also tried by filename, but the filename in the "on" callback is always the first file which was selected for upload - some closure scoping I have to figure out.
How do I programmatically remove files from the upload queue?
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>
And the file upload 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();
});
});
I solved this. Here is the solution with description:
I found my solution after tinkering with it some more. The key was remembering that I was in a call back. So in the event handler for the remove functionality, I just zeroed out the data.files array, and in the submit for that handler, I only submit if the files array has a length greater than 0. I cleaned up the event handler function so it's easier on the eyes. HTML is unchanged.
New JavaScript handling code:
$('#myForm').fileupload({
url: "/SomeUrl",
dataType: 'html',
add: function (e, data) {
$.each(data.files, function (index, 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', { 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();
}
});
}
});
这篇关于用jquery fileupload basic以编程方式删除文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
