HTML5/JS - div内に複数のファイル入力を表示

Question

私はHTML5のすばらしい「複数の」ファイル選択機能を使用しています。

<input type="file" id="fileInput" onChange="runTest()" multiple> 

私はの「警告」を私にすることを、私はテストJS関数を実行すると、入力フィールドの下に、選択したファイル名を表示し、それがCSSできれいに見えるように、しかし...

したいと思います入力フィールドの値は、それだけにかかわらず、私は「一」ファイル入力フィールドを持っていたし、大丈夫働いたが、今では「複数」だ、それはdoesnのときのためにこれをやっていた10

function runTest() { 
var fileInput = document.getElementById('fileInput').value; 
alert("You selected: "+fileInput); 
} 

を選択する私の一つのファイルを示していそれは好きです。

提案がありますか？

Answer 1

これは、最後に選択したファイルの名前だけです。この要素によって返される値はval()です。

$('input:file[multiple]').change(
    function(){ 
     $('ul').append($('<li />').text($(this).val())); 
    }); 

JS Fiddle demo：この問題を回避するには、複数の変更イベントの性質を利用するのが賢明かもしれません。

そして、リストに名前を出力するか（例のように）、最後の値を配列に追加するか、隠し入力を使用/作成してアプリケーションに最適なファイル名を格納します。

$('input:file[multiple]').change(
    function(e){ 
     console.log(e.currentTarget.files); 
    }); 

JS Fiddle demo：ファイル名にアクセスするに

（だけでなく、最終更新日時、ファイルサイズを...）あなたは（クロム12/Ubuntuの11.04でテスト）することができますが、以下を使用します。上記は、もう少し便利で、うまくいけば、実証するためにを編集

---

：

$('input:file[multiple]').change(
    function(e){ 
     console.log(e.currentTarget.files); 
     var numFiles = e.currentTarget.files.length; 
      for (i=0;i<numFiles;i++){ 
       fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024; 
       filesize = Math.round(fileSize); 
       $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output')); 
       $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last')); 
      } 
    }); 

JS Fiddle demo。

$('input:file[multiple]').change(
    function(e){ 
     console.log(e.currentTarget.files); 
     var numFiles = e.currentTarget.files.length; 
      for (i=0;i<numFiles;i++){ 
       fileSize = parseInt(e.currentTarget.files[i].size, 10)/1024; 
       filesize = Math.round(fileSize); 
       $('<li />').text(e.currentTarget.files[i].name).appendTo($('#output')); 
       $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last')); 
      } 
    }); 

JS Fiddle demo：

最終コードブロックは、原因（おそらく以前からけれども）、コメントにnextgentechによって、以下のWebkit、クロム24の変化に、更新されました。

Answer 2

アラートコールでブレークポイントを設定し、変数fileInputの内容を調べ、すべてのファイル名を含む別のプロパティがあるかどうかを確認します。

Answer 3

優れたコードが、オブジェクトごとの変化のために空にする必要がある：申し訳ありませんが、

$('input:file[multiple]').change(
function(e){ 
    $('#output').empty(); 
    console.log(e.currentTarget.files); 
    var numFiles = e.currentTarget.files.length; 
     for (i=0;i<numFiles;i++){ 
      fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024; 
      filesize = Math.round(fileSize); 
      $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output')); 
      $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last')); 
     } 
}); 

が