javascript - length - ¿Cómo seleccionar múltiples archivos con<input type="file">?

input type file javascript

Question

¿Cómo seleccionar múltiples archivos con <input type="file"> ?

Answer 1

Copie y pegue esto en su 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 viene a usted, a través de mí, desde esta página web: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

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

Answer 3

Este plugin jQuery ( jQuery File Upload Demo ) lo hace sin flash, en la forma que está usando:

<input type=''file'' name=''files[]'' multiple />

Answer 4

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

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

ex: input type = "file" name = "myPhotos []" multiple = "multiple"

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

Answer 5

Nueva respuesta:

En HTML5, puede agregar el atributo multiple 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á usar varias etiquetas de entrada o usar Flash o Silverlight.

Answer 6

Puedes hacerlo ahora con HTML5

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

<input type=''file'' multiple>

Answer 7

También hay HTML5 <input type="file" multiple /> ( specification ).

La compatibilidad con el navegador es bastante buena en el escritorio (simplemente no es compatible con IE 9 y anteriores), es menos útil en dispositivos móviles, supongo porque es más difícil de implementar correctamente según la plataforma y la versión.

Answer 8

Todo debe 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úrate de tener el enctype=''multipart/form-data'' en tu etiqueta <form> , o no puedes leer los archivos en el lado del servidor después del envío!

Answer 9

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