HTML5の入力タイプファイルからファイル名を取得する方法javascriptまたはjqueryを使用して

Question

以下はHTML 5の複数ファイルのアップロードを使用する簡単なコードです。私に必要なのは、すべてのファイル名ではない以下のパスをつかむためにある私は、ボタンを押すと、コンソール出力が

ようです

<form action='server.php' method='post' enctype='multipart/form-data' target="iframe"> 
       <input id="files" name='files[]' type='file' multiple> 
       <input type='button' onclick="getFileNames()"> 
</form> 

ような単純なJavaScriptコード

function getFileNames() 
     { 
      var path = $('#files').val(); 
      console.log(' path = ' + path); 
     } 

とHTMLフォームがあるさ

パス= Chrysanthemum.jpg

これはファイルのファーストネームで、残りの名前が必要な場合は、提案、コメントをいただければ幸いです。ありがとう。

配列による

Answer 1

を使用arrayとしてのfilesとなります。

var files = $('input#files')[0].files; 
var names = ""; 
$.each(files,function(i, file){ 
    names += file.name + " "; 
}); 
alert(names); 

フィドル：http://jsfiddle.net/raj_er04/nze2B/1/

純粋なJavaScriptの

function getFileNames(){ 
    var files = document.getElementById("files").files; 
    var names = ""; 
    for(var i = 0; i < files.length; i++) 
     names += files[i].name + " "; 
    alert(names); 
} 

フィドル：http://jsfiddle.net/raj_er04/nze2B/2/

Answer 2

代わりの

var path = $('#files').val(); 

ループ、私はinput type fileの場合に値が格納されている、多くの研究の後に溶液と思いここにしても

var names = ""; 
var path = $('#files').each(function(i, el) { 
    names = names + el.val() + ","; 
}); 

Answer 3

function getFileNames() 
    { 
     var files = document.getElementById("files").files;   
    for (var i = 0, f; f = files[i]; i++) { 
      console.log(' name= ' + f.name); 
alert(' path = ' + f.name); 
     } 
    }