HTML5/JS - wyświetlanie wielu danych wejściowych w div

Question

Używam wspaniałej funkcji wyboru "wielu" plików HTML5.

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

Chciałbym, aby wyświetlić wybrane nazwy plików poniższe pola wprowadzania i sprawiają, że wygląda całkiem z CSS, jednak ...

Jeśli uruchomić funkcję testu JS, że „” ostrzega mnie z wartość pole tekstowe jest, to pokazuje tylko jeden plik, niezależnie od me wybierając 10.

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

robię to, gdy miałem „jeden” pole wprowadzania plików i pracował w porządku, ale teraz to „wielokrotny”, nie robi” tak to lubię.

Wszelkie sugestie?

Answer 1

Cóż, wygląda na to, że wartość, lub val(), zwrócona przez element jest nazwą tylko ostatniego wybranego pliku. Aby obejść ten problem, to może być mądry, aby skorzystać z charakterem wydarzeń wielu zmian:

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

JS Fiddle demo.

I wypisz nazwy do listy (jak w przykładzie) lub dołącz ostatnią wartość do tablicy lub ewentualnie użyj/utwórz ukryte dane wejściowe do przechowywania nazw plików, które według Ciebie najlepiej pasują do Twojej aplikacji.

dostępu do pliku-nazwy (jak ostatnia data modyfikacji, rozmiar plików, ...) można (testowane w Chromium 12/Ubuntu 11.04) należy stosować następujące:

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

JS Fiddle demo.

---

Zmieniano aby powyższe nieco bardziej użyteczny i, miejmy nadzieję, poglądowe:

$('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.

Ostateczny kod blok zaktualizowane, ze względu na zmiany w Webkit, Chrome 24 (choć być może z wcześniej), przez nextgentech w komentarzach poniżej:

$('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.

Answer 2

Ustaw punkt przerwania połączenia alarmowego i spójrz na zawartość zmiennej fileInput, zobacz, czy istnieje inna właściwość zawierająca wszystkie nazwy plików.

Answer 3

Doskonała kod ale obiekt musi być pusty dla każdej zmiany:

$('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')); 
     } 
}); 

Dziękuję David ...