Question

Currently I am using jQuery to read the value of a file input to read the file extension and determine if it is a zip file. (It does not matter that I get fakepath as I only need access to the filename.) When I have multiple set on the input tag and I select multiple files .val() only grabs the path of the last file that was selected. Is there any way to iterate through each one?

Answer 1

The HTML5 File API defines a FileList object which is accessible through the files property of the event target. You could do something like this:

$("input[type='file']").change(function(e) {
    var fileList = e.target.files;
});

The FileList object contains a list of File objects, and the name property should give you the name you’re looking for:

console.log(fileList[0].name);

Here’s a working example.

Edit

Previously, I showed the use of the originalEvent property of the jQuery event object. This was unnecessary since the target property is present on the jQuery event object as well as the original event object.