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

Ajout de [] lorsque l'ajout à fd fonctionne, mais si vous préférez avoir vos données groupées par fichier, je vous suggère de le faire de cette façon :

var files= document.getElementById('inpFile').files
var fd = new FormData()

for (let i = 0; i < files.length; i++) {
  fd.append(i, files[i])
}

Maintenant, vos données seront envoyées groupées par fichier au lieu d'être groupées par attribut.

Answer 2

Cela a fonctionné pour moi

var ins = $('.file').map(function () {
    return this.files;
}).get();

for (var x = 0; x < ins; x++) {
    formData.append("file", ins[x][0]);
}

Answer 3

Cela a bien fonctionné !

var fd = new FormData();

$('input[type="file"]').on('change', function (e) {
    [].forEach.call(this.files, function (file) {
        fd.append('filename[]', file);
    });
});

$.ajax({
    url: '/url/to/post/on',
    method: 'post',
    data: fd,
    contentType: false,
    processData: false,
    success: function (response) {
        console.log(response)
    },
    error: function (err) {
        console.log(err);
    }
});

Answer 4

J'ai travaillé comme ça :

var images = document.getElementById('fileupload').files;
var formData = new FormData();
for(i=0; i<images.length; i++) {
     formData.append('files', images[i]);
}

Answer 5

Si vous instanciez l'objet FormData en passant déjà le formulaire comme paramètre de constructeur, l'attribut du nom du fichier d'entrée doit contenir les crochets.

HTML :

<form id="myForm" method="POST" action="url" enctype="multipart/form-data">
<input class="form-control form-control-lg" type="file" name="photos[]" multiple />

JS :

var formData = new FormData(document.getElementById('myForm'));
console.log(formData.getAll('photos[]'));

Ça a marché pour moi !