Javascript JQuery - 获取 input='file' 中的所有文件名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10703102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery - get all fileNames inside input='file'
提问by Nolesh
I have <input type="file" id="basicUploadFile" multiple="multiple">and I want to get all file names inside this input. I've seen some example, but it gets only name of first file.
我有<input type="file" id="basicUploadFile" multiple="multiple">并且我想在此输入中获取所有文件名。我看过一些例子，但它只得到第一个文件的名称。
$ ('#basicUploadFile').live ('change', function () {
alert($ ('#basicUploadFile').val());
});
How can I do this? Thanks.
我怎样才能做到这一点？谢谢。
回答by wrock
var files = $('#basicUploadFile').prop("files")
fileswill be a FileList object.
files将是一个 FileList 对象。
var names = $.map(files, function(val) { return val.name; });
Now namesis an array of strings (file names)
现在names是一个字符串数组（文件名）
回答by Richard
jsFiddle Demo
jsFiddle 演示
You can still access the files as a FileListcollection without the need for over-using jQuery. I've created a quick jsFiddledemonstrating how to get the information out of the input using the FileListand Fileobjects. Here is a snippet:
您仍然可以将文件作为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
}
});
回答by JD - DC TECH
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);
});
});
回答by Penny Liu
livewas deprecated many versions ago and removed in v1.9.You can perform with .on().
live在许多版本之前已弃用并在 v1.9 中删除。您可以使用.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">回答by fitorec
you can extend the prototype of File Object(for example File.prototype.toJSON), and you can access the FileList of <input ..>:
您可以扩展File Object的原型（例如File.prototype.toJSON），您可以访问 FileList 的<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
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!
祝你好运！
回答by Jaydeep Shil
<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; });
}
