how to get file names from input type file in html 5 using javascript or jquery

Question

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()
        {
            var path = $('#files').val();
            console.log(' path = ' + path);
        }

and html form is as

<form action='server.php' method='post' enctype='multipart/form-data' target="iframe">
                <input id="files" name='files[]' type='file' multiple>
                <input type='button' onclick="getFileNames()">
</form>

when i press the button the console output is as

path = Chrysanthemum.jpg

which is the first name of the file and i want the remaining names , any suggestions , comments are appreciated. thanks.

well after lot of work i found a nice solution.. check my answer. — dku.rajkumar
– dku.rajkumar, Commented Jan 24, 2012 at 7:15

dku.rajkumar · Accepted Answer · 2012-01-24 07:34:05Z

6

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

function getFileNames(){
    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/

edited Jan 24, 2012 at 7:34

answered Jan 24, 2012 at 7:15

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user47900 · Accepted Answer · 2012-01-24 15:52:10Z

1

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

edited Jan 24, 2012 at 15:52

answered Jan 24, 2012 at 5:17

user47900

6574 silver badges6 bronze badges

2 Comments

Khurram Ijaz Over a year ago

i got the files = document.getElementById('files'); and remaining is your code doesn't do any thing no errors no log as well.

user47900 Over a year ago

Here is the entire code with console log aswell as alert function getFileNames() { var files = document.getElementById("files").files; for (var i = 0, f; f = files[i]; i++) { console.log(' path = ' + f.name); alert(' path = ' + f.name); } }

esqew · Accepted Answer · 2012-01-24 05:09:47Z

-1

Instead of

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

loop through the array, use

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

answered Jan 24, 2012 at 5:09

esqew

44.9k28 gold badges139 silver badges179 bronze badges

4 Comments

Khurram Ijaz Over a year ago

Thanks but i am getting this error in firefox. el.val is not a function [Break On This Error] names = names + el.val() + ",";

techfoobar Over a year ago

Use $(el).val() instead of el.val()

Khurram Ijaz Over a year ago

it only returns one file name though

Quentin Over a year ago

What "array"? #files is an id selector, there is only going to be a single element in the jQuery object

Collectives™ on Stack Overflow

how to get file names from input type file in html 5 using javascript or jquery

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related