web-dev-qa-db-fra.com

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

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

javascripthtmlfile-upload
88
Mask

Nouvelle réponse:

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

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

Ancienne réponse:

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

98
ZippyV

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

La prise en charge du navigateur est assez bonne sur le bureau (mais pas prise en charge par IE 9 et versions antérieures), moins bonne sur le mobile, je suppose qu’il est plus difficile à implémenter correctement en fonction de la plate-forme et de la version.

76
Niavlys

Le tout devrait ressembler à ceci:

<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 le enctype='multipart/form-data' _ attribut dans votre <form>, ou vous ne pouvez pas lire les fichiers côté serveur après la soumission!

19
mark.inman

Ce plugin jQuery ( démo jQuery File Upload ) le fait sans flash, sous la forme qu'il utilise:

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

Vous pouvez le faire maintenant avec HTML5

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

<input type='file' multiple>
8
Costa

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

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

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

et si vous utilisez php, vous obtiendrez les données dans $ _FILES et utiliserez var_dump ($ _ FILES). Vous verrez le résultat et le traitement. Vous pouvez maintenant effectuer une itération et faire le reste.

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

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());
};
0
Francis Thiong'o