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

Question

在谷歌 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;

Answer 1

这应该有效：

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

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

Answer 2

我建议类似于以下内容：

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

JS 小提琴演示。

如果您允许上传多个文件，则使用该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 小提琴演示。

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

Answer 3

该元素具有通过其成员变量访问<input type=file>的零索引FileListfiles。

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

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

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

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

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

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

如果输入仅用于单个文件，则只需使用 name 属性

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