JQuery - get all fileNames inside input='file'

Question

I have and I want to get all file names inside this input. I\'ve seen some example, but

Answer 1

<input name="selectAttachment" id="selectAttachment" type="file" multiple="multiple">
<button class="btn btn-default" onclick="uploadAttachment()" type="submit">Upload</button>


function uploadAttachment() {
                debugger;
                var files = $('#selectAttachment').prop('files');
                var names = $.map(files, function (val) { return val.name; });
            }

Answer 2

live was deprecated many versions ago and removed in v1.9. You can perform with .on().

See the live example below:

$('#basicUploadFile').on('change', function() {
  for (var i = 0; i < this.files.length; i++) {
    console.log(this.files[i].name);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="basicUploadFile" multiple="multiple">

Answer 3

var files = $('#basicUploadFile').prop("files")

files will be a FileList object.

var names = $.map(files, function(val) { return val.name; });

Now names is an array of strings (file names)

FileAPI reference
files property reference

Answer 4

jsFiddle Demo

---

You can still access the files as a FileList collection without the need for over-using jQuery. I've created a quick jsFiddle demonstrating how to get the information out of the input using the FileList and File objects. Here is a snippet:

$('#basicUploadFile').live('change', function ()
{
    for (var i = 0; i < this.files.length; i++)
    {
        alert(this.files[i].name);
        alert(this.files.item(i).name); // alternatively
    }
});

Answer 5

you can extend the prototype of File Object (for example File.prototype.toJSON), and you can access the FileList of <input ..>:

<input id="myFile" type="file">

 var file = document.getElementById('fileItem').files[0];

For more information check this documentation:

https://developer.mozilla.org/en-US/docs/Web/API/FileList#Using_the_file_list

check this simple example:

File.prototype.toJSON = function() {
	return {
		'lastModified'     : this.lastModified,
		'lastModifiedDate' : this.lastModifiedDate,
		'name'             : this.name,
		'size'             : this.size,
		'type'             : this.type 
	};
}

function getFiles() {
    var files = document.getElementById('myFiles').files;
    document.getElementById('result').innerHTML = '<h1>result</h1>'
      + JSON.stringify(files);
}

<input id="myFiles" type="file" multiple onchange="getFiles()" />
<pre id='result'></pre>

Good Luck!

Answer 6

I used this to show in console all files name:

var input_file = $("#input_file");
input_file.on("change", function () {
     var files = input_file.prop("files")
     var names = $.map(files, function (val) { return val.name; });
     $.each(names, function (i, name) {
          console.log(name);
     });
});