在现代浏览器中删除文件

Question

Problem

I am currently using ( https://github.com/blueimp/jQuery-File-Upload/wiki ) this jQuery HTML5 Uploader. The basic version, no ui.

The big problem is, that I looked everywhere (Mozilla Developer Network, SO, Google, etc.) and found no solution for removing a files already added via dragNdrop or manually via the file input dialogue.

Why do I want to achieve removing a file? Because it seems that HTML5 has a kind of "bug". If you drop / select a file (file input has set multiple) upload it, and then drop / select another file you magically have now the new file twice and it gets uploaded twice.

To prevent this magic file caching the use would have to refresh the page, which is not what someone wants to have for his modern AJAX web app.

What I have tried so far:

• .reset()
• .remove()
• Reset Button
• Setting .val() to ''

This seems to be a general HTML5 JS problem not jQuery specific.

Theory

Might it be, that $j('#post').click (I bind / re-bind a lot of times different callbacks), stacks the callbacks methods so that each time the updateFileupload function is called an additional callback is set. The actual problem would now not rely anymore on the HTML5 upload, it would now rely on my could, miss-binding the .click action on my submit button (id=#post). If we now call .unbind before each .click there shouldn't be any duplicated callback binding.

Code

Function containing the upload code:

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

It could be more a browser security issue. Current file uploads specs don't allow javascript (or anything as far as I know) to tamper with the value of the file field even if to remove it.

So I would imagine any good file uploader would create multiple file upload fields so you can remove the entire field rather than play with the value?

This is speculation though.

Shouldn't click() only be bound once? you shouldn't need to rebind a click event to a single element '#post' (unless this element changes, in which case it should really be a class). You can place the click() event binding outside of the options for file upload, as long as it's contained in a $(function(){} so it's when the DOM's ready.

Aside from that I'm trying to read the code without any HTML and no experience in multiple file uploading. The best thing to do is try and re-create it on jsfiddle.net , that way others can go in and play around with the code without affecting you and your likely to find the problem while putting the code in there anyway :)