如何使用 JavaScript 或 JQuery 从 input type=file html 元素中获取文件名？答案

【问题标题】：How to get the filename from input type=file html element using JavaScript or JQuery?如何使用 JavaScript 或 JQuery 从 input type=file html 元素中获取文件名？
【发布时间】：2012-05-21 10:03:00
【问题描述】：

在 Google Chrome 浏览器中，我尝试了几种方法 + 以下方法，但没有一种方法给我附加的文件名的值，验证后我将提交文件。但总是找不到它的未定义或 val()..

如何解决？

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;

【问题讨论】：

Uncaught TypeError: Object #<HttmlinputElement> has no mehtod 'val' 这就是它在尝试使用$(v).val() 时返回的结果。
认真的吗？ $(v) 返回一个 jquery 对象
旁注：id 应该是唯一的。例如使用attachment1、attachment2、...、attachmentn。

标签： javascript jquery internet-explorer firefox google-chrome

【解决方案1】：

<input type=file> 元素有一个零索引的FileList，可通过其成员变量files 访问。

您可以通过查询选择器访问该列表：

document.querySelector('input[type=file]').files

您可以使用点符号访问文件名：

document.querySelector('input[type=file]').files[0].name

需要注意的是，在 Chrome 53、Firefox 49 和当前的W3C spec for the FileAPI 中，files 是一个类似数组的列表，而不是实际的数组。您可以通过其索引访问每个文件对象，但如果不先将列表转换为数组，您将无法访问任何数组原型。

【讨论】：

【解决方案2】：

这应该可行：

$("input[name='attachment[]']").each(function() {
    var fileName = $(this).val().split('/').pop().split('\\').pop();
    console.log(fileName);
});

您无法获取文件的完整路径，因为它取决于您使用的浏览器。输入文件唯一常见的跨浏览器值是文件名。

【讨论】：

【解决方案3】：

我建议类似于以下内容：

$('input:file').change(
    function(e){
        console.log(e.target.files[0].name);
    });

JS Fiddle demo.

如果您允许上传多个文件，请使用 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);
        }
    });

JS Fiddle demo.

注意：在当前浏览器版本中，f[i].fileName 应为 f[i].name。

【讨论】：

现在应该是 .name 而不是 .fileName。
我可以确认它现在是 .name 而不是 .fileName。编辑答案可能是件好事:)

【解决方案4】：

为

<input type="file" mutiple onchange="getSongs(this.files)"/>

使用

function getSongs(files){
  ...
  for(var i = 0; i < files.length; i++){
     file=files[i];
     filename=file.fileName;
  }
}

如果输入只是单个文件，只需使用名称属性

$("type=['file']").attr('name');

【讨论】：

实际上是：filename=file.name;