如何使用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>元素具有通過其成員變量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

對於

<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');