JQuery - 获取input ='file'中的所有文件名

Question

我有<input type="file" id="basicUploadFile" multiple="multiple">，我希望在此输入中获取所有文件名。我见过一些例子，但它只获得了第一个文件的名称。

$ ('#basicUploadFile').live ('change', function () {
    alert($ ('#basicUploadFile').val());
});

我该怎么做？感谢。

Answer 1

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

files将是一个FileList对象。

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

现在names是一个字符串数组（文件名）

FileAPI reference
files property reference

Answer 2

jsFiddle Demo

---

您仍然可以将文件作为FileList集合进行访问，而无需过度使用jQuery。我已经创建了一个快速jsFiddle，演示了如何使用FileList和File对象从输入中获取信息。这是一个片段：

$('#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 3

我用它来在控制台中显示所有文件名：

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);
     });
});

Answer 4

<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 5

live在很多版本之前已弃用，已在v1.9中删除。 您可以使用.on()执行。

请参阅下面的实例：

$('#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 6

您可以扩展 File Object 的原型（例如File.prototype.toJSON），并且可以访问<input ..>的FileList：

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

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

有关更多信息，请查看此文档：

  

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

检查以下简单示例：

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>

祝你好运！