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

在谷歌C​​hrome浏览器中，我尝试了几种方式+跟随，没有人给我附加的文件名的值，validation后我将提交文件。 但总是找不到undefined或val（）。

怎么解决？

console.log($("input[name='attachment[]']")); /* Output: [ ​ , ​ , ​ ] */ $.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 ​ 1 ​ 2 ​ */ 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 

JS小提琴演示 。

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

Answer 3

元素具有通过其成员变量files访问的零索引FileList 。

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

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

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

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

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

Answer 4

对于

使用

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

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

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