Question

在谷歌Chrome浏览器中，我尝试了几种方式+跟随，没有人给我附加的文件名的值，验证后我将提交文件。但总是找不到undefined或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 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。

Answer 3

<input type=file>元素通过其成员变量files访问了零索引FileList。

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

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

您可以使用点表示法访问文件名：

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

应该注意的是，在Chrome 53，Firefox 49和当前的W3C spec for the 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;
  }
}

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

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

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

4 个答案: