Skip to content Skip to sidebar Skip to footer

How To Get File Names From Input Type File In Html 5 Using Javascript Or Jquery

below is my simple code using HTML 5 multiple file upload. All i need is to grab all the file names not the paths below is simple javascript code function getFileNames()

Solution 1:

well so here i am with the solution after lot of research, in case of input type file the value is stored in array as files with key name.

var files = $('input#files')[0].files;
var names = "";
$.each(files,function(i, file){
    names += file.name + " ";
});
alert(names);

fiddle : http://jsfiddle.net/raj_er04/nze2B/1/

pure javascript

functiongetFileNames(){
    var files = document.getElementById("files").files;
    var names = "";
    for(var i = 0; i < files.length; i++)
        names += files[i].name + " ";
    alert(names);
}

fiddle : http://jsfiddle.net/raj_er04/nze2B/2/

Solution 2:

functiongetFileNames()
    {
       var files = document.getElementById("files").files;         
    for (var i = 0, f; f = files[i]; i++) {
          console.log(' name= ' + f.name);
alert(' path = ' + f.name);
        }
    }

Solution 3:

Instead of

var path = $('#files').val();

loop through the array, use

var names = "";
var path = $('#files').each(function(i, el) {
    names = names + el.val() + ",";
});

Post a Comment for "How To Get File Names From Input Type File In Html 5 Using Javascript Or Jquery"