Question

问题

我目前正在使用（https://github.com/blueimp/jQuery-File-Upload/wiki）这个jQuery HTML5 Uploader。基本版，没有用户。

最大的问题是，我到处寻找（Mozilla开发者网络，SO，谷歌等）并找不到删除已经通过dragNdrop添加的文件或通过文件输入对话框手动删除的文件的解决方案。

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

为了防止这种魔术文件缓存，使用必须刷新页面，这不是某人想要的现代AJAX Web应用程序。

到目前为止我尝试过：

.reset段（）
卸下摆臂（）
重置按钮
将.val（）设置为''

这似乎是一个普通的HTML5 JS问题，而不是特定于jQuery的。

理论

可能是$j('#post').click（我多次绑定/重新绑定不同的回调），堆叠回调方法，以便每次调用updateFileupload函数时都会设置一个额外的回调。实际问题现在不再依赖于HTML5上传，它现在依赖于我的能力，错过绑定我的提交按钮上的.click动作（id = #post）。如果我们现在在每个.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();
                    }

                });
        }

Answer 1

这可能更像是一个浏览器安全问题。当前文件上传规范不允许javascript（或我所知的任何东西）篡改文件字段的值，即使要删除它。

所以我认为任何好的文件上传器都会创建多个文件上传字段，这样你就可以删除整个字段而不是播放值？

这是猜测。

更新了问题的答案：

不应该点击（）只绑定一次吗？你不需要将click事件重新绑定到单个元素'#post'（除非这个元素改变，在这种情况下它应该是一个类）。你可以将click（）事件绑定放在文件上传选项之外，只要它包含在$（function（）{}中，所以当DOM准备就绪时。

除此之外，我正在尝试阅读没有任何HTML的代码，也没有多文件上传的经验。最好的办法是尝试在jsfiddle.net上重新创建它，这样其他人可以进入并使用代码而不会影响你，并且你可能会在将代码放在那里时发现问题:)

在现代浏览器中删除文件

问题

理论

代码

1 个答案: