Comment sélectionner plusieurs fichiers avec <input type = “file”>?

Comment sélectionner plusieurs fichiers avec <input type="file">?

Nouvelle réponse:

En HTML5, vous pouvez ajouter l' multipleattribut pour sélectionner plus d'un fichier.

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

Ancienne réponse:

Vous ne pouvez sélectionner qu'un seul fichier par <input type="file" />. Si vous souhaitez envoyer plusieurs fichiers, vous devrez utiliser plusieurs balises d'entrée ou utiliser Flash ou Silverlight.

Il existe également du HTML5 <input type="file" multiple />( spécification ).

La prise en charge du navigateur est assez bonne sur le bureau (mais non prise en charge par IE 9 et les versions antérieures), moins bonne sur mobile, je suppose parce 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 d'avoir l' enctype='multipart/form-data'attribut dans votre <form>balise, sinon vous ne pouvez pas lire les fichiers côté serveur après la soumission!

Ce plugin jQuery ( jQuery File Upload Demo ) 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 de fichier.

<input type='file' multiple>

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

REMARQUE: faites attention au nom de l'élément d'entrée. lorsque vous souhaitez télécharger plusieurs fichiers, vous devez utiliser un tableau et non une chaîne comme valeur de l'attribut de nom.

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

et si vous utilisez php, vous obtiendrez les données dans $ _FILES et utiliserez var_dump ($ _ FILES) et verrez la sortie et le traitement maintenant vous pouvez itérer et faire le reste

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

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

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 vous vient, à travers moi, de cette page Web: http://www.html5rocks.com/en/tutorials/file/dndfiles/