How to remove single file from html input type file multiple?

Question

HTML:

<div class="filesdiv">
        <input type="file" name="files" id="files" style="display: none;" multiple 
      required>
        <label for="files" class="btn btn-xs">Upload files</label>
        <div class="filenames"></div>
</div>

JQUERY:

var filelist = [];

$('#files').change(function(event) {
    files = this.files;
    console.log(files);
    filelist.push(files);
    console.log(filelist[0]);
    $('.filenames').empty()
    $.each(files, function(index) {
        $('.filenames').append('<div style="overflow: hidden;">'+this.name+'</div>');
    });
    $('#files').val('')
    console.log(this.files)
    console.log(filelist[0])
});

My consoles output:

My basic need is to delete a single file from multiple input. I have read few stackoverflow answers and blogs that, files are in FileList Object and it is read only. So, I am trying to make a local copy and try to manipulate it. Once the FileList object is deleted so is the array filelist.

Are you sure you need to delete a file? Why not just skip it when processing the files? — random_user_name, Jul 06 '17 at 15:52
thanks, I can skip the file on the server side. But I wanna know why FileList object could not be copied ? — Yogi, Jul 06 '17 at 16:12
That's not what you asked. Maybe you should edit the question to ask _that_, instead of "how to". Also, this is actually a duplicate question. See the answer linked in the comment. — random_user_name, Jul 06 '17 at 17:20

score 0 · Answer 1 · answered Jul 06 '17 at 15:55

0

You may want to use a lib to make life easier.

Some thing like uploadify: http://www.uploadify.com/documentation/uploadifive/implementing-uploadifive/

answered Jul 06 '17 at 15:55

Jack Luo

333
3
5

How to remove single file from html input type file multiple?

1 Answers1