CODEWITHSUNDEEP
jqueryfile-uploadinput
yajRs
yajRs

Reputation: 91

Accessing filenames of a multiple file upload form

I want to read out the filenames of my multi upload form, however Javascript is just adding the first item only.

<input name="upload[]" id="upload" type="file" multiple="multiple">

$("#upload").change(function() {
    $("#upload").each(function() {
        $("#upload_prev").append(this.value);
    });
});

Upvotes: 6

Views: 10781

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337714

Multiple file upload fields are not yet very well supported by jQuery. Your best option is to revert to native javascript to get access to the files collection. Try this:

$("#upload").change(function() {
    var files = $(this)[0].files;
    for (var i = 0; i < files.length; i++) {
        $("#upload_prev").append(files[i].name);
    }
});

Example fiddle

Also, here's a fiddle with a couple of the issues with your example fixed, such as clearing the previous list of files when re-selecting and appending the filename on a new line: http://jsfiddle.net/Vs5Hk/3/

Upvotes: 12

Related Questions