Comment sélectionner plusieurs fichiers avec?

Il y a aussi HTML5 <input type="file" multiple /> (Spécification ).

Le support du navigateur est assez bon sur le bureau (tout simplement pas pris en charge par IE 9 et avant), moins bon sur mobile, je suppose que c'est plus difficile à implémenter correctement en fonction de la plate-forme et de la version.

Le tout devrait ressembler à:

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

Assurez-vous que vous avez l'attribut enctype='multipart/form-data' dans votre balise <form>, ou vous ne pouvez pas lire les fichiers Côté Serveur après la soumission!

Ce plugin jQuery (démo de téléchargement de fichiers jQuery ) le fait sans flash, sous la forme qu'il utilise:

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

Vous pouvez le faire maintenant avec HTML5

En substance, vous utilisez l'attribut multiple sur l'entrée du fichier.

<input type='file' multiple>

HTML5 a fourni un nouvel attribut multiple pour l'élément d'entrée dont l'attribut de type est file. Ainsi, vous pouvez sélectionner plusieurs fichiers et IE9 et les versions précédentes ne supportent pas cela.

NOTE: soyez prudent avec le nom de l'élément d'entrée. lorsque vous souhaitez télécharger plusieurs fichiers vous devez utiliser array et non string comme valeur du fichier nom de l'attribut.

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

Et si vous utilisez php, vous obtiendrez les données $_FICHIERS et utilisez var_dump ($_FILES) et voir la sortie et faire le traitement Maintenant, vous pouvez itérer et faire le reste

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

C'est facile ...

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

Copiez et collez ceci dans votre 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>';
}

Cela vient à vous, à travers moi, de cette page web: http://www.html5rocks.com/en/tutorials/file/dndfiles/