Formulaire multipart/form-data sans nom de champ

Question

J'ai un formulaire HTML que j'utilisais pour envoyer des informations au backend nodejs. J'ai ensuite essayé d'implémenter des téléchargements de fichiers en utilisant le même formulaire. Pour ce faire, j'ai dû changer l'enctype du formulaire de la valeur par défaut (application/x-www-form-urlencoded) pour être enctype = 'multipart/form-data', et j'ai dû utiliser multer sur le backend. J'ai aussi ce bouton:

<input type="button" value="Submit" onclick="submitRequest(this);"> 

que je devais changer pour:

<input type="submit" value="Submit" onclick="submitRequest(this);"> 

Cela a très bien fonctionné dans le sens que les fichiers que j'avais maintenant télécharger sur le serveur. Cependant, cette implémentation dépend des noms du champ dans le formulaire. Le problème est que la plupart des champs que j'ai n'ont pas de noms.

Je me demandais s'il y a un moyen d'obtenir des fichiers et des données à envoyer sans avoir à donner des noms à chaque champ sous la forme? Je me demande s'il serait possible d'injecter mes propres données dans le résultat généré après avoir cliqué sur Submit et avant que ce résultat ne soit envoyé au backend? Sinon, y a-t-il un autre moyen?

Answer 1

Vous pouvez utiliser FormData pour définir clé et la valeur multipart/form-data, fetch() ou XMLHttpRequest() à POST données au serveur.

<form id="form"> 
    <select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    </select> 
    <input type="file" /> 
    <input type="submit" value="Submit" /> 
</form> 

function submitRequest(event) { 
    event.preventDefault(); 
    var i = 0; 
    var inputs = form.querySelector("input[type=file], select"); 
    var fd = new FormData(); 
    for (let el of inputs) { 
    if (el.tagName === "SELECT") { 
     fd.append("select", el.value) 
    } 
    if (el.type === "file") { 
     if (el.files.length) { 
     for (let file of el.files) { 
      fd.append("file" + (i++), file); 
     } 
     } 
    } 
    } 
    fetch("/path/to/server", {method:"POST", body:fd}) 
    .then(function(response) { 
    return response.text() 
    }) 
    .then(function(res) { 
    console.log(res) 
    }) 
    .catch(function(err) { 
    console.log(err) 
    }) 
} 

const form = document.getElementById("form"); 
form.onsubmit = submitRequest;