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;

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;

• javascript
• jquery
• forms

• Duplicate : stackoverflow./questions/6365858/… – Кристиян Кацаров Commented Oct 15, 2014 at 20:15
• might be similar but name same. i looked all over. – leoarce Commented Oct 15, 2014 at 20:16
• no jsfiddle on accepted answer to see proper usage, and all the other jsfiddles on that page don't work. – leoarce Commented Oct 15, 2014 at 20:20
• please don't search everything ready made for you. Look at the answers, code and descriptions... – Кристиян Кацаров Commented Oct 15, 2014 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 Commented Oct 15, 2014 at 20:26

1 Answer 1

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 mas:

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

See demo.