¿Cómo seleccionar varios archivos con <input type = "file">?


110

¿Cómo seleccionar varios archivos con <input type="file">?


Se trata de javascript y html
Mask

¿Te refieres a cargar varios archivos de una vez (cuando seleccionas uno a la vez y luego haces clic en cargar)? ¿O te refieres a usar ctrl + clic para seleccionar varios archivos en una ventana del navegador?
cletus

2
Puede hacerlo con HTML5 utilizando el atributo múltiple en el elemento de entrada. <input type = 'file' multiple = ''> Aquí hay un gran violín que lo utiliza: jsfiddle.net/0GiS0/Yvgc2
Costa

Respuestas:


126

Nueva respuesta:

En HTML5 puede agregar el multipleatributo para seleccionar más de 1 archivo.

<input type="file" name="filefield" multiple="multiple">

Respuesta anterior:

Solo puede seleccionar 1 archivo por <input type="file" />. Si desea enviar varios archivos, deberá utilizar varias etiquetas de entrada o utilizar Flash o Silverlight.


7
Gmail usa Flash para hacer esto
Fabien Ménager

19
No desde HTML5. Hay un atributo múltiple para el campo de entrada.
Costa

2
@Costa El 20 de octubre de 2009, la mayoría de los navegadores no admitían esa función y Niavlys ya mostró la solución html5 hace 2 años.
ZippyV

2
esta respuesta es más antigua que los dinosaurios
Haga clic en Upvote el

2
this multiple = "multiple" no es fácil de usar, el usuario promedio no lo entiende, ni siquiera sabe lo que hace un "botón ctrl" y no puede seleccionar archivos en diferentes carpetas.
Jean-Paul

84

También existe HTML5 <input type="file" multiple />( especificación ).

El soporte del navegador es bastante bueno en el escritorio (simplemente no es compatible con IE 9 y versiones anteriores), menos bueno en el móvil, supongo que porque es más difícil de implementar correctamente según la plataforma y la versión.


9
No compatible con IE9 y anteriores :(
Ashit Vora

7
considere agregarname="files[]"
Wariored

22

Todo debería verse así:

<form enctype='multipart/form-data' method='POST' action='submitFormTo.php'> 
    <input type='file' name='files[]' multiple />
    <button type='submit'>Submit</button>
</form>

¡Asegúrese de tener el enctype='multipart/form-data'atributo en su <form>etiqueta, o no podrá leer los archivos en el lado del servidor después del envío!


a menos que lo envíe con un websocket o ajax
bluejayke


8

Puedes hacerlo ahora con HTML5

En esencia, usa el atributo múltiple en la entrada del archivo.

<input type='file' multiple>

¿Qué hay del apoyo para esta cosa? Canisuse.com no tiene la información.
Hubert OG

No estoy seguro, revisé el mismo lugar, jaja.
Costa

1
FileReader no tiene .namepropiedad, por lo que el título en su ejemplo es siempre undefined: jsfiddle.net/m5jeyeyt/1
vladkras

1

HTML5 ha proporcionado un nuevo atributo múltiple para el elemento de entrada cuyo atributo de tipo es archivo. Por lo tanto, puede seleccionar varios archivos e IE9 y las versiones anteriores no lo admiten.

NOTA: tenga cuidado con el nombre del elemento de entrada. cuando desee cargar varios archivos, debe usar matriz y no cadena como valor del atributo de nombre.

ej: tipo de entrada = "archivo" nombre = "myPhotos []" multiple = "multiple"

y si está usando php, obtendrá los datos en $ _FILES y usará var_dump ($ _ FILES) y verá la salida y procesará Ahora puede iterar y hacer el resto


1

Eso es fácil ...

<input type='file' multiple>
$('#file').on('change',function(){
     _readFileDataUrl(this,function(err,files){
           if(err){return}
           console.log(files)//contains base64 encoded string array holding the 
           image data 
     });
});
var _readFileDataUrl=function(input,callback){
    var len=input.files.length,_files=[],res=[];
    var readFile=function(filePos){
        if(!filePos){
            callback(false,res);
        }else{
            var reader=new FileReader();
            reader.onload=function(e){              
                res.push(e.target.result);
                readFile(_files.shift());
            };
            reader.readAsDataURL(filePos);
        }
    };
    for(var x=0;x<len;x++){
        _files.push(input.files[x]);
    }
    readFile(_files.shift());
};

5
Esto ya está claramente respondido. ¿Cuál es la necesidad de agregar un ejemplo de JavaScript?
RightHandedMonkey

porque es agradable?
Thomas Ludewig

0
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
<?php
print_r($_FILES['img']['name']);
?>

-2

Copia y pega esto en tu html:

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
  output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

Esto te llega, a través de mí, desde esta página web: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.