web-dev-qa-db-ja.com

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

GoogleではChromeブラウザ、私はいくつかの方法+フォローを試みましたが、検証後にファイルを送信しますが、常に未定義または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;
javascriptjqueryinternet-explorerfirefoxgoogle-chrome
17
YumYumYum

これは動作するはずです：

$("input[name='attachment[]']").each(function() {
    var fileName = $(this).val().split('/').pop().split('\\').pop();
    console.log(fileName);
});

使用するブラウザに依存するため、ファイルのフルパスを取得することはできません。入力ファイルの唯一の一般的なクロスブラウザ値は、ファイルの名前です。

19
sp00m

次のようなものを提案します。

​$('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。

12
David Thomas

<input type=file>要素には、インデックスがゼロの FileList があり、そのメンバー変数filesを介してアクセスされます。

クエリセレクタを介してそのリストにアクセスできます。

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

そして、ドット表記でファイル名にアクセスできます：

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

Chrome 53、Firefox 49、および現在の FileAPIのW3C仕様 、filesは配列のようなリストではないことに注意してください実際の配列：インデックスを介して各ファイルオブジェクトにアクセスできますが、最初にリストを配列に変換しない限り、配列プロトタイプにアクセスすることはできません。

4
worc

for

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