javascript - 在现代浏览器中删除文件

Question

问题

我目前正在使用( https://github.com/blueimp/jQuery-File-Upload/wiki )这个 jQuery HTML5 uploader 。基本版本，无ui。

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

为什么我要实现删除文件？因为看起来HTML5有一种“bug”。如果您删除/选择一个文件(文件输入已设置多个)上传它，然后删除/选择另一个文件，您现在神奇地拥有新文件两次，并且它被上传两次。

为了防止这种神奇的文件缓存，用户必须刷新页面，这不是有人希望他的现代 AJAX Web 应用程序拥有的东西。

到目前为止我已经尝试过:

• .reset()
• .remove()
• 重置按钮
• 将 .val() 设置为 ''

这似乎是一个普遍的 HTML5 JS 问题，而不是 jQuery 特有的问题。

理论

可能是，$j('#post').click(我绑定(bind)/重新绑定(bind)了很多次不同的回调)，堆叠了回调方法，以便每个调用 updateFileupload 函数时，会设置一个附加回调。实际的问题现在不再依赖于 HTML5 上传，它现在依赖于我的能力，错误绑定(bind)了我的提交按钮(id=#post)上的 .click 操作。如果我们现在在每次 .click 之前调用 .unbind，则不应有任何重复的回调绑定(bind)。

代码

包含上传代码的函数:

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(或据我所知的任何内容)篡改文件字段的值，即使删除它也是如此。

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

但这只是猜测。

更新问题的更新答案:

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

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