Téléchargement de plusieurs fichiers à l'aide de formData()

Question

var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "uph.php");
xhr.send(fd);

uph.php :

var_dump($_FILES['fileToUpload']);

Cela fonctionne, mais évidemment pour le files[0] seulement. Comment faire pour que cela fonctionne pour le fichier choisi ?

J'ai essayé de retirer le [0] mais ça n'a pas marché.

Answer 1

Vous devez obtenir la longueur des fichiers à ajouter en JS et ensuite l'envoyer via une requête AJAX comme ci-dessous

//JavaScript 
var ins = document.getElementById('fileToUpload').files.length;
for (var x = 0; x < ins; x++) {
    fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[x]);
}

//PHP
$count = count($_FILES['fileToUpload']['name']);
for ($i = 0; $i < $count; $i++) {
    echo 'Name: '.$_FILES['fileToUpload']['name'][$i].'<br/>';
}

Answer 2

La voie à suivre avec javascript :

var data = new FormData();

$.each($("input[type='file']")[0].files, function(i, file) {
    data.append('file', file);
});

$.ajax({
    type: 'POST',
    url: '/your/url',
    cache: false,
    contentType: false,
    processData: false,
    data : data,
    success: function(result){
        console.log(result);
    },
    error: function(err){
        console.log(err);
    }
})

Si vous appelez data.append('file', file) plusieurs fois, votre requête contiendra un tableau de vos fichiers.

Extrait des documents Web du MDN :

"Le append() de la méthode FormData ajoute une nouvelle valeur à une clé existante dans un fichier de type FormData ou ajoute la clé si elle n'existe pas déjà. La différence entre FormData.se t et append() est que si la clé spécifiée existe déjà, FormData.set sera écraser toutes les valeurs existantes avec la nouvelle valeur, tandis que append() ajoutera la nouvelle valeur à la fin de l'ensemble des valeurs existantes."

J'utilise moi-même node.js et multipart handler middleware multer pour obtenir les données comme suit :

router.post('/trip/save', upload.array('file', 10), function(req, res){
    // Your array of files is in req.files
}

Answer 3

Il suffit d'utiliser fileToUpload[] au lieu de fileToUpload :

fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[0]);

Et il retournera un tableau avec plusieurs noms, tailles, etc...

Answer 4

Cela a marché pour moi :

let formData = new FormData()
formData.append('files', file1)
formData.append('files', file2)

Answer 5

Celui-ci a fonctionné pour moi

//Javascript part
//file_input is a file input id
var formData = new FormData();
var filesLength=document.getElementById('file_input').files.length;
for(var i=0;i<filesLength;i++){
    formData.append("file[]", document.getElementById('file_input').files[i]);
}
$.ajax({
   url: 'upload.php',
   type: 'POST',
   data: formData,
   contentType: false,
   cache: false,
   processData: false,
   success: function (html) {

  }
});

<?php
//PHP part
$file_names = $_FILES["file"]["name"];
for ($i = 0; $i < count($file_names); $i++) {
   $file_name=$file_names[$i];
   $extension = end(explode(".", $file_name));
   $original_file_name = pathinfo($file_name, PATHINFO_FILENAME);
   $file_url = $original_file_name . "-" . date("YmdHis") . "." . $extension;
 move_uploaded_file($_FILES["file"]["tmp_name"][$i], $absolute_destination . $file_url);
}