如何使用 JavaScript 或 JQuery 从 input type=file html 元素中获取文件名？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10683192/
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
How to get the filename from input type=file html element using JavaScript or JQuery?
提问by sp00m
In Google Chrome browser, i have tried several way + following and none is giving me the value of the file name which was attached, after validation i will submit the file. But always its undefined or val() does not found..
在 Google Chrome 浏览器中，我尝试了多种方法 + 以下方法，但都没有给出附加文件名的值，验证后我将提交文件。但总是找不到它的 undefined 或 val() 。
How to resolve it?
如何解决？
console.log($("input[name='attachment[]']"));
/* Output:
[
<input type=?"file" name=?"attachment[]?" id=?"attachment">?
,
<input type=?"file" name=?"attachment[]?" id=?"attachment">?
,
<input type=?"file" name=?"attachment[]?" id=?"attachment">?
]
*/
$.each($("input[name='attachment[]']"), function(i,v) {
console.log(i);
console.log(v); //v.val() does not exist... even uploaded a file and showing file
});
/* Output:
0
<input type=?"file" name=?"attachment[]?" id=?"attachment">?
1
<input type=?"file" name=?"attachment[]?" id=?"attachment">?
2
<input type=?"file" name=?"attachment[]?" id=?"attachment">?
*/
return false;
回答by sp00m
This should work:
这应该有效：
$("input[name='attachment[]']").each(function() {
var fileName = $(this).val().split('/').pop().split('\').pop();
console.log(fileName);
});
You can't get the full path of the file, because it depends on the browser you use. The only common cross-browser value for an input file is the name of the file.
您无法获取文件的完整路径，因为这取决于您使用的浏览器。输入文件唯一常见的跨浏览器值是文件名。
回答by David says reinstate Monica
I'd suggest something akin to the following:
我建议类似于以下内容：
?$('input:file').change(
function(e){
console.log(e.target.files[0].name);
});???
If you're allowing for multiple files to be uploaded, using the multipleattribute, then to get each of the names:
如果您允许上传多个文件，请使用该multiple属性，然后获取每个名称：
$('input:file').change(
function(e){
var f = e.target.files,
len = f.length;
for (var i=0;i<len;i++){
console.log(f[i].name);
}
});?
NOTE: in current browser versions, f[i].fileNameshould be f[i].name.
注意：在当前浏览器版本中，f[i].fileName应该是f[i].name.
回答by worc
The <input type=file>element has a zero-indexed FileListaccessed through its member variable files.
该<input type=file>元素具有通过其成员变量访问的零索引FileListfiles。
You can access that list through a query selector:
您可以通过查询选择器访问该列表：
document.querySelector('input[type=file]').files
And you can access the file name with dot notation:
您可以使用点符号访问文件名：
document.querySelector('input[type=file]').files[0].name
It should be noted that in Chrome 53, Firefox 49, and the current W3C spec for the FileAPI, filesis an Array-like list not an actual array. You can access each file object through its index, but you won't have access to any array prototypes without first converting the list to an array.
应当指出的是，在浏览器53，火狐49，并且当前用于FileAPI W3C规范，files是阵列状的列表不是一个实际的阵列。您可以通过其索引访问每个文件对象，但如果不先将列表转换为数组，您将无法访问任何数组原型。
回答by panda
for
为了
<input type="file" mutiple onchange="getSongs(this.files)"/>
use
用
function getSongs(files){
...
for(var i = 0; i < files.length; i++){
file=files[i];
filename=file.fileName;
}
}
if the input is just for single file, just use the name attribute
如果输入仅用于单个文件，只需使用 name 属性
$("type=['file']").attr('name');
