Jqueryを使用して複数のファイルにアクセスする

Question

HTML 5の複数のファイルを使用して、アップロードする複数のファイルを選択できます。ファイルは、$_FILES変数のファイルの配列として出力されます。私はアップロードボタンがクリックされる前にリストされたファイルのすべての名前を取得するためにjQueryを使いたいと思います。

<input class="pictures-upload" name="multiplePhotos[]" type="file" multiple="multiple" /> 

私は、人がアップロードファイルをクリックすると、複数のファイルを選択するとき、それはすべてのファイルの名前を取り、HTMLの体にそれを追加することのonchangeイベントを追加します。私は使用しています

$('.upload_button').live('change', function() { 
    var li = $('<li />').text($(this).val()), 
    $('#body').append(li); 

}); 

これは選択する最後のファイルのみをとります。すべてのファイルを取得するにはどうしたらいいですか？

Answer 1

input要素には、FileListタイプ（つまり、Fileのシーケンス）の 'ファイル'のネイティブプロパティがあります。 File要素のW3仕様を調べると、アクセスできるプロパティが見つかります。

しかし、短いストーリー、jQuery valメソッドは、あなたが望むものを返さないでしょう。 'files'は入力要素のネイティブプロパティであるため、this.filesを使用して直接アクセスできます。次に、配列を繰り返して、（name、size、typeなど）の情報を取得できるFileオブジェクトを取得します。

for (var i = 0; i < this.files.length; i++) { 
    var file = this.files[i]; 
    $fileList.append('<li>' + file.name + '</li>'); 
} 

それのjsFiddleのためにここを見て：http://jsfiddle.net/jonathon/bdbXk/