YumYumYum YumYumYum - 1 month ago 6
Javascript Question

How to get the filename from input type=file html element using JavaScript or JQuery?

In Google Chrome browser, i have tried several way + following and none is giving me the value of the file name which was attached, after validation i will submit the file. But always its undefined or val() does not found..

How to resolve it?

console.log($("input[name='attachment[]']"));
/* Output:
[
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
,
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
,
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
]
*/

$.each($("input[name='attachment[]']"), function(i,v) {
console.log(i);
console.log(v); //v.val() does not exist... even uploaded a file and showing file

});

/* Output:
0
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
1
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
2
<input type=​"file" name=​"attachment[]​" id=​"attachment">​
*/

return false;

Answer

This should work:

$("input[name='attachment[]']").each(function() {
    var fileName = $(this).val().split('/').pop().split('\\').pop();
    console.log(fileName);
});

You can't get the full path of the file, because it depends on the browser you use. The only common cross-browser value for an input file is the name of the file.