Accessing filenames of a multiple file upload form

Question

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);
    });
});

Answer 1

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/