How do I grab the names of multiple files that are about to be uploaded?

Question

I have the following form and div and jQuery. When selecting a file to be uploaded, the name of the file (with it's extension) will output to the div, however, it doesn't work for multiple files. When selecting multiple files, only the name of the first file is output. I looked all over for a solution for multiple files, and could not find it.

<form id="myform" action="" method="post" enctype="multipart/form-data">
    <input type="file" multiple name="files[]" />
    <input type="submit" name="submit" value="Submit">
</form>

<div class="filename"></div>

$("input:file").change(function (){
    var fileName = $(this).val();
    $(".filename").html(fileName);
});

So remember, getting the list of file names (with their extensions) should happen as soon as files are selected, not after the form is being submitted.

EDIT:

On top of what i said below, another thing that happens is that when a single file is selected, the name of that file shows up next to the browse button, but when multiple files are selected, it doesn't show the name of each file, it just says "# files selected." for firefox and "# files" for chrome. i went to see what IE does and that one is different. it puts the path of the file or files in the text field next to browse button, so i guess that's what the other question and answer was all about. i tried all of these and none work, and even if one of them did, that seems to be an internet explorer only thing. i need a cross browser solution.

var fileName = $(this).val().split('\\').pop();

var fileName = $(this).val().split(',').pop();

var fileName = $(this).val().split(', ').pop();

So to recap, when selecting multiple files, the name of each file should be output/displayed. even if that other solution works for removing file path and just leaving the file name and extension (for IE only), it doesn't work for showing the name of every file selected. it only shows the first file.

EDIT2:

Just in case you were wondering, i tried this too but it was a no go, but it seems like the answer posted here did work, so that's good.

var fileName = document.getElementById("myfiles").files;

Duplicate : http://stackoverflow.com/questions/6365858/use-jquery-to-get-the-file-inputs-selected-filename-without-the-path — Кристиян Кацаров, Oct 15 '14 at 20:15
no jsfiddle on accepted answer to see proper usage, and all the other jsfiddles on that page don't work. — leoarce, Oct 15 '14 at 20:20
please don't search everything ready made for you. Look at the answers, code and descriptions... — Кристиян Кацаров, Oct 15 '14 at 20:22
that other answer doesn't even work. at least not for me and the way i'm trying to use it. am i splitting wrong? i don't know, because i'm not a jquery expert. why are there 2 slashes? does it need to be blank or a space? this is the kind of help i'm asking for. — leoarce, Oct 15 '14 at 20:26
they are talking about removing part of the full path, or removing fake from the path or renaming the path. i don't have that issue, so that's why that answer is not for me. i just want a list of the files separated by spaces or commas. — leoarce, Oct 15 '14 at 20:30

dreyescat · Accepted Answer · 2014-10-15T21:56:32.900

You can use the files property of the file input element to get the list of files selected. This property contains a FileList object that can be use like this:

$("input:file").change(function () {
    var filenames = '';
    for (var i = 0; i < this.files.length; i++) {
        filenames += '<li>' + this.files[i].name + '</li>';
    }
    $(".filename").html('<ul>' + filenames + '</ul>');
});

See demo.

If you just want a list of the files separated by spaces or commas:

$("input:file").change(function () {
    var filenames = $.map(this.files, function (file) {
        return file.name;
    });
    $(".filename").html(filenames.join(', '));
});

See demo.

How do I grab the names of multiple files that are about to be uploaded?

1 Answers1