【发布时间】：2011-12-14 01:31:21
【问题描述】：
问题
我目前正在使用 (https://github.com/blueimp/jQuery-File-Upload/wiki) 这个 jQuery HTML5 上传器。 基础版，无ui。
最大的问题是，我到处寻找（Mozilla 开发者网络、SO、Google 等）并没有找到删除已通过拖放或手动通过文件输入对话框添加的文件的解决方案。
为什么要实现删除文件？ 因为HTML5似乎有一种“bug”。 如果您删除/选择一个文件（文件输入已设置多个）上传它，然后删除/选择另一个文件，您现在神奇地拥有了两次新文件，并且它被上传了两次。
为了防止这个神奇的文件缓存用户必须刷新页面，这不是人们希望他的现代 AJAX Web 应用程序拥有的。
到目前为止我所尝试的：
- .reset()
- .remove()
- 重置按钮
- 将 .val() 设置为 ''
这似乎是一般的 HTML5 JS 问题，不是 jQuery 特有的。
理论
可能是$j('#post').click（我多次绑定/重新绑定不同的回调）堆叠回调方法，以便每次调用 updateFileupload 函数时都会设置一个额外的回调。
实际问题现在将不再依赖于 HTML5 上传，它现在将依赖于我的能力，在我的提交按钮 (id=#post) 上未绑定 .click 操作。
如果我们现在在每次 .click 之前调用 .unbind，就不应该有任何重复的回调绑定。
代码
包含上传代码的函数：
function updateFileupload (type) {
var destination = "";
switch(type)
{
case upload_type.file:
destination = '/wall/uploadfile/id/<?=$this->id?>';
break;
case upload_type.image:
destination = '/wall/upload/id/<?=$this->id?>';
break;
}
$j('#fileupload').fileupload({
dataType: 'json',
url: destination,
singleFileUploads: false,
autoUpload: false,
dropZone: $k(".dropZone"),
done: function (e, data) {
console.log("--:--");
console.log(data.result);
upload_result = data.result;
console.log(upload_result);
console.log("--:--");
console.log(type);
if(type == upload_type.image)
{
var imageName = upload_result.real;
console.log(imageName);
$k.get('/wall/addpicture/id/<?=$this->id ?>/name'+imageName, function(data){
if(data > 0){
console.log("I made it through!");
if(!data.id)
{
$k('#imgUpload').html('');
//$k('#imgPreview').fadeOut();
$k('#newPost').val('');
$k.get("/wall/entry/id/"+data, function(html){
$k('#postList').prepend(html);
});
}
}
});
}
},
send: function(e, data){
var files = data.files;
var duplicates = Array(); // Iterate over all entries and check whether any entry matches the current and add it to duplicates for deletion
for(var i=0; i<data.files.length;i++)
{
for(var j=0;j<data.files.length-1;j++)
{
if(files[i].name == files[j].name && i != j)
{
duplicates.push(j);
}
}
}
if(duplicates.length > 0)
{
for(var i=0;i<duplicates.length;i++)
files.splice(i, 1);
}
console.log("Duplicates");
console.log(duplicates);
},
drop: function(e, data){
console.log("outside");
// $k.each(data.files, function(index, file){
// $k('#imageListDummy').after('<li class="file-small-info-box">'+file.name+'</li>');
// console.log(file);
//
// });
},
add: function(e, data){
upload_data = data;
console.log(data);
$k.each(data.files, function(index, file){
$k('#imageListDummy').after('<li class="file-small-info-box">'+file.name+'</li>');
console.log(file);
});
$j('#post').click(function(event){
upload_data.submit();
if(type == upload_type.image)
{
var file = upload_data.files[0];
console.log("I am here");
console.log(file);
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
img.height = 64;
img.width = 64;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src);
}
document.getElementById('imgPreview').appendChild(img);
$k('#imgPreview').show();
}
clickPostCallback(event);
});
$j('#showSubmit').show();
}
});
}
【问题讨论】：
-
... 或者它可能是您自己的代码中的错误。但是，我们无法确定您是否不发布它。
-
您也阅读了该插件的常见问题解答，尤其是。问题“如何清除上传文件列表”？
-
@Pointy 这是关于表示 FileList 对象。常见问题部分仅讨论表示，而不是操纵。
标签： javascript jquery file html file-upload