HTML5/JS: mostrar la entrada de varios archivos en div

Question

Estoy utilizando la maravillosa función de selección de archivos "múltiples" de HTML5.

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

me gustaría mostrar los nombres de los archivos seleccionados por debajo del campo de entrada y hacer que se vea bonito con CSS, sin embargo ...

Si me quedo una función JS prueba, que alerta '' me de la el valor del campo de entrada, que sólo muestra un archivo independientemente de mí seleccionar 10.

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

que estaba haciendo esto para cuando tenía un campo de entrada 'single' de archivos y funcionó bien, pero ahora es 'múltiple', que doesn' me gusta

¿Alguna sugerencia?

Answer 1

Bueno, parece que el valor, o val(), devuelto por el elemento es el nombre del único archivo seleccionado. Para solucionar este problema, que podría ser una buena idea usar la naturaleza de los eventos de varios cambios:

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

JS Fiddle demo.

Y puede mostrar los nombres en una lista (como en el ejemplo) o agregar el último valor a una matriz o, posiblemente, usar/crear entradas ocultas para almacenar los nombres de archivo que mejor se adapte a su aplicación.

Para acceder a los nombres de archivo (así como la última fecha de modificación, tamaño de archivo ...) puede (probado en Chromium 12/Ubuntu 11.04) Utilice los siguientes:

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

JS Fiddle demo.

---

Editado para hacer lo anterior un poco más útil y, con suerte, demostrativa:

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

El código de bloque final actualizado, debido a cambios en WebKit, Chrome 24 (aunque posiblemente desde antes), por nextgentech en los comentarios, a continuación:

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

Establezca un punto de interrupción en la llamada de alerta y eche un vistazo al contenido de la variable fileInput, vea si hay otra propiedad que contenga todos los nombres de archivo.

Answer 3

Excelente código, sino objeto tiene que estar vacío para cada cambio:

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

Gracias David ...