Recuperation des données coter php en ajax

Levy Stephane
Javascript
PHP

Salut à tous j'ai un p'tit soucis avec la récuperation des données coter php de mes champs input.

 handleFormSubmit = async (e) => {
    e.preventDefault();
    const button = e.submitter;
    this.spinner.show(button, this.messageBox, '<div class="spinner"></div>');
    const formData = new FormData(this.form);

    const jsonData = Object.fromEntries(formData.entries());
    try {
      const response = await fetch(`${ResolvePath(this.serverPath)}`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(jsonData)
      });}

Ce que je veux

Je souhaite pouvoir également récuperer les données du champ input de type file pour pouvoir les envoyer en base de donnée.

Ce que j'obtiens

Malheureusement lors de la soumition du formulaire tous les champs sont récuperer sauf le champ de type file qui renvoie une cle avec une valeur qui correspond à un tableau vide. apres reflexion je me suis rendu compte que c'était du au faite que la page n'était pas rechargé lors de l"envoi du formulaire a cause du preventDefault j'aimerai donc savoir s'il y'avait un moyen de pouvoir recuperer ce type de champ sans rafraichir la page, comment, et sans etre améné à utiliser jquery.

1 réponse

popotte

Hello :)

Alors pour commencer, dans ton tag form tu as bien encodé en multipart? enctype="multipart/form-data" Pour pouvoir traiter les fichier

Ensuite tu dois ajouter manuellement le fichier dans ton formData:

let formData = new FormData(this.form);
let file = document.getElementById('l-id-de-ton-input-file').files[0]
formData.append('le-name-de-ton-input-file', file, file.name);

// Ensuite tu fais ta requête normal