【问题标题】：JQuery - get all fileNames inside input='file'JQuery - 获取 input='file' 中的所有文件名
【发布时间】：2012-05-22 13:32:00
【问题描述】：

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

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

我该怎么做？谢谢。

【问题讨论】：

stackoverflow.com/questions/6171013/…
这个问题的完全重复：stackoverflow.com/questions/3654179/…

标签： javascript jquery

【解决方案1】：

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

files 将是一个 FileList 对象。

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

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

FileAPI reference
files property reference

【讨论】：

很好地演示了我不知道的.prop() 和$.map() 方法。 :)
是的，multiple属性的支持只出现在IE10中。
使用if (window.File && window.FileList)检查浏览器支持
简单解释。谢谢
stackoverflow.com/questions/27898745/… .... 请帮助@wrock

【解决方案2】：

jsFiddle Demo

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

$('#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
    }
});

【讨论】：

你能解释一下为什么使用“this”而不是“$(this)”
$(this) 只会为我们提供对象this 的 jQuery 包装器，这在某些情况下会很有帮助，因为它会公开某些方法，但在这种情况下它是不必要的。
这在 IE 中不起作用 - IE 不允许您访问文件列表。
@Oddman，部分正确；仅IE10支持多文件上传，caniuse.com/#feat=forms
我们已经在我们自己的浏览器上进行了广泛的测试，并且无法在任何 IE 浏览器中访问 files 属性:(

【解决方案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);
     });
});

【讨论】：

【解决方案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; });
            }

【讨论】：

【解决方案5】：

可以扩展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>

祝你好运！

【讨论】：