javascript - Input type FILE multiple - add files sequentially - Stack Overflow

admin管理员组

文章数量:1202815

I am developing a page (one-time use - its registration page) when a visitor opens dialog box and uploads files throught input type file multiple. All worked fine, but my client just told me they want to be able to upload multiple files from different directories. By opening that dialog more times.

Now, normally what happens is that when I open file select dialog another time, the previously selected files got removed from the input.

Is there any way (pure HTML or JS) that I could add the possibility to "stack" files - add them to the selection (maybe some JS object later converted back to input type file?) so that files can be added to the list of files in the input?

I am developing a page (one-time use - its registration page) when a visitor opens dialog box and uploads files throught input type file multiple. All worked fine, but my client just told me they want to be able to upload multiple files from different directories. By opening that dialog more times.

Now, normally what happens is that when I open file select dialog another time, the previously selected files got removed from the input.

Is there any way (pure HTML or JS) that I could add the possibility to "stack" files - add them to the selection (maybe some JS object later converted back to input type file?) so that files can be added to the list of files in the input?

• javascript
• jquery
• html
• input

Share Improve this question Follow asked Mar 11, 2015 at 13:28 Jakub KolčářJakub Kolčář 30411 gold badge66 silver badges1414 bronze badges 2

• to allow them to select more than one in the same selection just include the attribute multiple w3schools.com/tags/att_input_multiple.asp , if you want the last selection to say , just listen to click and save what gets selected. probably need to see code to offer more help. – Abraham Adam Commented Mar 11, 2015 at 13:35
• 1 Abraham I already have set "multiple" option. Clients want to be able to select more files from different directories, which can be only done by opening that dialog more times. Hovewer it gets removed each time. I just wanted to not make it using ajax or something, because everything gets saved when the form is sent - there are many other fields on the form, cant send it every time file is added. Yes making last selection to stay is what I need. – Jakub Kolčář Commented Mar 11, 2015 at 14:22

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 13

I would say that you have two options here.

Stick to classic form

If you want to keep the classic form logic, you will have to add more file inputs to keep your old selections. A short script will look like :

$('input[type="file"]').on('change', function() { $(this).append('<input type="file" name="file[]"/>') });

So to add more files, the user can click on the next file input. You can then enhance it to make it nicer with design stuff and remove functionality.

The HTML5 way

While the previous idea is simple, I think it lacks of design and user friendliness. So the other idea is a more advance way, which will need a bit more of work but will let you do what you want and more (You could add drag/drop for instance).

So the basic idea is that when the user select a file, you will get the file in Javascript, you can do it by using the FileReader object. When you have the file content, you can just queue it on a variable.

var queue = [];

function addFile(event) {
    var files = event.target.files, i = 0, j = files.length, file, reader;

    reader = new FileReader();
    reader.onloadend = function () {
        queue.push{ reader.result };
    };

    for (i = 0; i < j; i += 1) {
        file = files[i];
        reader.readAsBinaryString(file);
    }
}

Note that If you want to keep the select dialog, you will need to keep the file input.

Once your user valid the form, you should send your other inputs first by Ajax (you want to stay on the page, or you'll have to store your files like in the localStorage which I think is a bad idea). Then you'll have to send your file to the server using Ajax requests as well, it's easy as just sending the file bits to the server. And on your server you will have to get those bits and simply put it on a file (If you have a specific language for the server part we can extend on how doing it).

You can go then further that way and have the possibility to get the progress of the upload, cancel an upload, slice your files if you have size limitation, do drag and drop,...

Of course, you will to considerate that some browsers have some issues with this object, but it tend to be good everywhere.

Note on the "classic form"/JQuery solution given by Gregoire: this will not work on the newly added inputs, as the listener is not active on them. If you modify this to use delegated events you have a working clean solution:

<div id="files">
    <input type="file" name="file[]" />
</div>

$("#files").on("change", "input", function(event){
    $('#files').append('<input type="file" name="file[]"/>')
});

本文标签： javascriptInput type FILE multipleadd files sequentiallyStack Overflow