javascript - JavaScriptまたはJQueryを使用してinput type=file html要素からファイル名を取得する方法は?

Question

Google 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 フィドルのデモ。

属性を使用して複数のファイルのアップロードを許可している場合、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" 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');