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

Si nous avons une entrée dans notre html :

<input id="my-input" type="file" mutliple /> // multiple attribute to select and upload multiple files

Nous pouvons obtenir des fichiers à partir de cette entrée et les envoyer au serveur avec de purs js script :

const myInput = document.getElementById('my-input') // getting our input

myInput.addEventListener('change', (event) => { // listening for file uploads
    const files = event.target.files // getting our files after upload
    const formData = new FormData() // create formData

    for (const file of files) {
        formData.append('files', file) // appending every file to formdata
    }

    const URL = 'http://server.com:3000'
    const response = fetch(URL, {
       method: 'POST',
       data: formData // sending our formdata in body of post request
    })

    return response.json() 
}

Cela a fonctionné parfaitement pour moi

P.S. : J'ai utilisé multer dans le backend (node.js + express), ajouté à la route de téléchargement des fichiers

upload.array("files", 10)

• Le premier argument est un nom de propriété de nos fichiers (en formdata)
• Le deuxième argument est la taille maximale du fichier

Answer 2

Voici le Vanilla JavaScript solution pour ce problème -

Tout d'abord, nous allons utiliser Array.prototype.forEach() comme

document.querySelectorAll('input[type=file]') renvoie un tableau comme objet .

Ensuite, nous utiliserons le Function.prototype.call() afin d'assigner chaque élément du objet de type tableau à la this dans le .forEach método.

HTML

<form id="myForm">

    <input type="file" name="myFile" id="myFile_1">
    <input type="file" name="myFile" id="myFile_2">
    <input type="file" name="myFile" id="myFile_3">

    <button type="button" onclick="saveData()">Save</button>

</form>

JavaScript

 function saveData(){
     var data = new FormData(document.getElementById("myForm"));
     var inputs = document.querySelectorAll('input[type=file]');

     Array.prototype.forEach.call(inputs[0].files, function(index){
        data.append('files', index);
     });
     console.log(data.getAll("myFile"));
}

Vous pouvez voir l'exemple de travail de la même ICI

Answer 3

Pour télécharger plusieurs fichiers avec les données du formulaire angulaire, assurez-vous que vous avez ceci dans votre component.html

Télécharger des documents

                <div class="row">

                  <div class="col-md-4">
                     &nbsp; <small class="text-center">  Driver  Photo</small>
                    <div class="form-group">
                      <input  (change)="onFileSelected($event, 'profilepic')"  type="file" class="form-control" >
                    </div>
                  </div>

                  <div class="col-md-4">
                     &nbsp; <small> Driver ID</small>
                    <div class="form-group">
                      <input  (change)="onFileSelected($event, 'id')"  type="file" class="form-control" >
                    </div>
                  </div>

                  <div class="col-md-4">
                    &nbsp; <small>Driving Permit</small>
                    <div class="form-group">
                      <input type="file"  (change)="onFileSelected($event, 'drivingpermit')" class="form-control"  />
                    </div>
                  </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                       &nbsp; <small>Car Registration</small>
                      <div class="form-group">
                        <div class="input-group mb-4">
                            <input class="form-control" 
                (change)="onFileSelected($event, 'carregistration')" type="file"> <br>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-6">
                        <small id="li"> Car Insurance</small>
                      <div class="form-group">
                        <div class="input-group mb-4">
                          <input class="form-control" (change)="onFileSelected($event, 

                         'insurancedocs')"   type="file">
                        </div>
                      </div>
                    </div>

                  </div>

                <div style="align-items:c" class="modal-footer">
                    <button type="button" class="btn btn-secondary" data- 
                  dismiss="modal">Close</button>
                    <button class="btn btn-primary"  (click)="uploadFiles()">Upload 
                  Files</button>
                  </div>
              </form>

Dans votre fichier componenet.ts déclarez le tableau des fichiers sélectionnés comme suit

selectedFiles = [];

// tableau des fichiers sélectionnés

onFileSelected(event, type) {
    this.selectedFiles.push({ type, file: event.target.files[0] });
  }

//dans la méthode de téléchargement des fichiers, ajoutez les données de votre formulaire comme ceci

uploadFiles() {
    const formData = new FormData(); 

    this.selectedFiles.forEach(file => {
      formData.append(file.type, file.file, file.file.name); 
    });
    formData.append("driverid", this.driverid);

    this.driverService.uploadDriverDetails(formData).subscribe(
      res => {
        console.log(res); 

      },
      error => console.log(error.message)
    );
  }

NOTE : J'espère que cette solution fonctionnera pour vos amis.

Answer 4

Créer un FormData objet

const formData: any = new FormData();

Et ajouter au même nom de clé

photos.forEach((_photoInfo: { localUri: string, file: File }) => {
    formData.append("file", _photoInfo.file);
});

et l'envoyer au serveur

// angular code
this.http.post(url, formData)

cela créera automatiquement un tableau d'objets sous file

si vous utilisez nodejs

const files :File[] = req.files ? req.files.file : null;

Answer 5

J'ai trouvé ce travail pour moi !

var fd = new FormData();
$.each($('.modal-banner [type=file]'), function(index, file) {
  fd.append('item[]', $('input[type=file]')[index].files[0]);
});

$.ajax({
  type: 'POST',
  url: 'your/path/', 
  data: fd,
  dataType: 'json',
  contentType: false,
  processData: false,
  cache: false,
  success: function (response) {
    console.log(response);
  },
  error: function(err){
    console.log(err);
  }
}).done(function() {
  // do something....
});
return false;