Javascript 在现代浏览器中删除文件 问题

我目前正在使用（）这个jQuery HTML5上传程序。 基本版本，没有ui

最大的问题是，我到处寻找（Mozilla Developer Network、SO、Google等），没有找到删除通过dragNdrop或通过文件输入对话框手动添加的文件的解决方案

为什么要实现删除文件？ 因为HTML5似乎有一种“bug”。 如果您拖放/选择一个文件（文件输入设置了多个文件），请上载它，然后拖放/选择另一个文件，您现在神奇地拥有了新文件两次，并将其上载两次

为了防止这种神奇的文件缓存，用户必须刷新页面，而这并不是人们想要的现代AJAX web应用程序

到目前为止，我所尝试的：

• .reset（）
• .删除（）
• 复位按钮
• 将.val（）设置为“”

这似乎是一个一般的HTML5JS问题，而不是特定于jQuery的问题

理论 可能是，

$j（“#post”）。单击

（我绑定/重新绑定了很多次不同的回调），堆叠回调方法，以便每次调用updateFileupload函数时都设置一个额外的回调。 现在实际的问题不再依赖HTML5上传，而是依赖于我的可能，错过绑定。点击我的提交按钮（id=#post）上的操作。 如果我们现在调用。在每个之前取消绑定。单击不应存在任何重复的回调绑定。

代码 包含上载代码的函数：

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();
                    }

                });
        }

函数updateFileupload（类型）{
var destination=“”；
开关（类型）
{
案例上传_type.file：
destination='/wall/uploadfile/id/'；
打破
案例上传\u类型图像：
目的地='/wall/upload/id/'；
打破
}
$j（'#fileupload'）。fileupload({
数据类型：“json”，
网址：目的地，
singleFileUploads:false，
自动上载：false，
dropZone:$k（“.dropZone”），
完成：功能（e，数据）{
console.log（“-：-”）；
console.log（data.result）；
上传结果=data.result；
控制台日志（上传结果）；
console.log（“-：-”）；
console.log（类型）；
if（type==upload\u type.image）
{
var imageName=upload_result.real；
console.log（imageName）；
$k.get（'/wall/addpicture/id//name'+imageName，函数（数据）{
如果（数据>0）{
log（“我成功了！”）；
如果（！data.id）
{
$k（'#imgUpload'）.html（''）；
//$k（“#imgPreview”）.fadeOut（）；
$k（“#newPost”）.val（“”）；
$k.get（“/wall/entry/id/”+数据，函数（html）{
$k（“#postList”）.prepend（html）；
}); 
}
}
});
}
},
发送：功能（e、数据）{
var files=data.files；
var duplicates=Array（）；//迭代所有条目，检查是否有任何条目与当前条目匹配，并将其添加到重复条目中进行删除
对于（var i=0；i而言，这可能更像是一个浏览器安全问题。
当前的文件上传规范不允许javascript（或据我所知的任何东西）篡改文件字段的值，即使删除它

所以我想任何一个好的文件上传程序都会创建多个文件上传字段，这样你就可以删除整个字段，而不是使用值

不过，这只是猜测

更新问题的更新答案：

click（）不应该只绑定一次吗？您不应该将click（）事件重新绑定到单个元素“#post”（除非该元素发生更改，在这种情况下，它实际上应该是一个类）。您可以将click（）事件绑定放在文件上载选项之外，只要它包含在$（function（）{}中，这样就可以在DOM就绪时进行绑定

除此之外，我尝试在没有任何HTML的情况下阅读代码，也没有多文件上传的经验。最好的做法是尝试重新创建代码，这样其他人就可以在不影响您的情况下使用代码，并且在将代码放在其中时可能会发现问题：）
…或者这可能是您自己代码中的一个错误。但是，我们无法判断您是否没有发布它。您是否阅读了该插件的常见问题解答，尤其是“如何清除上载文件列表”的问题？@Pointy这是关于表示FileList对象的。常见问题解答部分仅讨论表示，而不是操作。