JQuery: obtenga todos los nombres de archivo dentro de la entrada = 'archivo'

Question

Tengo <input type="file" id="basicUploadFile" multiple="multiple"> y deseo obtener todos los nombres de archivo dentro de esta entrada. He visto un ejemplo, pero solo recibe el nombre del primer archivo.

$ ('#basicUploadFile').live ('change', function() { 
    alert($ ('#basicUploadFile').val()); 
}); 

¿Cómo puedo hacer esto? Gracias.

Answer 1

var files = $('#basicUploadFile').prop("files") 

files habrá un objeto FileList.

var names = $.map(files, function(val) { return val.name; }); 

Ahora names es una matriz de cadenas (nombres de archivo)

FileAPI reference
files property reference

Answer 2

jsFiddle Demo

---

Todavía se puede acceder a los archivos como una colección FileList sin el necesidad de usar en exceso jQuery. Creé un jsFiddle rápido que demuestra cómo obtener la información de la entrada usando los objetos FileList y File. Aquí hay un fragmento:

$('#basicUploadFile').live('change', function() 
{ 
    for (var i = 0; i < this.files.length; i++) 
    { 
     alert(this.files[i].name); 
     alert(this.files.item(i).name); // alternatively 
    } 
}); 

Answer 3

<input name="selectAttachment" id="selectAttachment" type="file" multiple="multiple"> 
<button class="btn btn-default" onclick="uploadAttachment()" type="submit">Upload</button> 


function uploadAttachment() { 
       debugger; 
       var files = $('#selectAttachment').prop('files'); 
       var names = $.map(files, function (val) { return val.name; }); 
      } 

Answer 4

que utiliza esto para mostrar en la consola de todos los nombres de los archivos:

var input_file = $("#input_file"); 
input_file.on("change", function() { 
    var files = input_file.prop("files") 
    var names = $.map(files, function (val) { return val.name; }); 
    $.each(names, function (i, name) { 
      console.log(name); 
    }); 
});