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

Question

在谷歌C​​hrome浏览器中,我尝试了几种方式+跟随,没有人给我附加的文件名的值,验证后我将提交文件.但总是找不到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小提琴演示.

如果您允许使用该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

应当指出的是，在浏览器53，火狐49，并且当前用于FileAPI W3C规范，files是阵列状的列表不是一个实际的阵列。您可以通过其索引访问每个文件对象，但如果不先将列表转换为数组，您将无法访问任何数组原型。