XMLHttpRequest POST multipart / form-data

StackOverflow https://stackoverflow.com/questions/155371

  •  03-07-2019
  •  | 
  •  

Question

Je souhaite utiliser XMLHttpRequest en JavaScript pour POST un formulaire incluant un élément input de type de fichier afin d'éviter l'actualisation de la page et d'obtenir du code XML utile.

Je peux soumettre le formulaire sans actualisation de la page, en utilisant JavaScript pour définir l'attribut cible du formulaire sur un iframe pour MSIE ou un objet pour Mozilla, mais cela pose deux problèmes. Le problème mineur est que la cible n’est pas conforme au W3C (c’est pourquoi je l’ai définie en JavaScript et non en XHTML). Le problème majeur est que l'événement onload ne se déclenche pas, du moins pas sur Mozilla sous OS X Leopard. De plus, XMLHttpRequest créerait un code de réponse plus joli, car les données renvoyées pourraient être du type XML et non pas limitées à XHTML, comme c'est le cas avec iframe.

La soumission des résultats du formulaire en HTTP ressemble à ceci: 

Content-Type: multipart/form-data;boundary=<boundary string>
Content-Length: <length>
--<boundary string>
Content-Disposition: form-data, name="<input element name>"

<input element value>
--<boundary string>
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>"
Content-Type: application/octet-stream

<element body>

Comment faire en sorte que la méthode d'envoi de l'objet XMLHttpRequest duplique le flux HTTP ci-dessus?

Était-ce utile?

La solution

Vous pouvez créer la demande 'multipart / form-data' vous-même (pour en savoir plus, consultez http : //www.faqs.org/rfcs/rfc2388.html ), puis utilisez la méthode send (c'est-à-dire xhr.send (vos-données-de-formulaire-multipart)). De même, mais plus facilement, dans Firefox 4+ (également dans Chrome 5+ et Safari 5+), vous pouvez utiliser le FormData , une interface permettant de créer de telles requêtes. La méthode send convient au contenu texte, mais si vous souhaitez envoyer des données binaires telles que des images, vous pouvez le faire à l'aide de la méthode sendAsBinary déjà en cours. avec Firefox 3.0. Pour plus d'informations sur l'envoi de fichiers via XMLHttpRequest , veuillez vous reporter à http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html .

Autres conseils

Il n’existe aucun moyen d’accéder à un champ de saisie de fichier à l’aide de javascript. Il n’existe donc pas de solution javascript uniquement pour les envois de fichiers ajax.

Il existe des solutions de contournement telles que en utilisant un iframe .

L’autre option consisterait en quelque chose comme SWFUpload ou Google Gears

Je ne vois pas pourquoi iframe (un invisible) implique XHTML et pas TOUT contenu. Si vous utilisez une iframe, vous pouvez définir l'événement onreadystatechange et attendre la fin. Ensuite, vous pouvez utiliser frame.window.document.innerHTML (veuillez me corriger) pour obtenir le résultat de la chaîne. 

var lFrame = document.getElementById('myframe');
lFrame.onreadystatechange = function()
{
   if (lFrame.readyState == 'complete')
   {
      // your frame is done, get the content...
   }
};

Pour que cela fonctionne, vous devrez POST sur un IFrame. Ajoutez simplement un attribut cible à votre formulaire, où vous spécifiez l'ID IFrame. Quelque chose comme ça: 


<form method="post" target="myiframe" action="handler.php">
...
</form>
<iframe id="myiframe" style="display:none" />

Je suis confus au sujet de l'événement onload que vous avez spécifié, il se trouve sur la page ou sur l'iframe? La première réponse est correcte. Il n'y a aucun moyen de le faire en utilisant purement xmlhttprequest. Si ce que vous voulez obtenir déclenche une méthode une fois que la réponse existe sur iframe, vérifiez simplement si elle a déjà du contenu ou n'utilise pas de script DOM, puis lancez la méthode.

pour attacher un événement onload à l'iframe 

if(window.attachEvent){
 document.getElementById(iframe).attachEvent('onload', some_method);
}else{
 document.getElementById(iframe).addEventListener('load', some_method, false);
}
  

Contenu-Disposition: données-formulaire, nom

Vous devez utiliser un point-virgule, comme ceci: Content-Disposition: form-data; nom

Voici une méthode à jour utilisant FormData ( complète doc @MDN )

Script: 

var form = document.querySelector('#myForm');
form.addEventListener("submit", function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", this.action);
    xhr.addEventListener("load", function(e) {
        // Your callback
    });

    xhr.send(new FormData(this));

    e.preventDefault();
});

(à partir de ce formulaire de base) 

<form id="myForm" action="..." method="POST" enctype="multipart/form-data">
    <input type="file" name="file0">
    <input type="text" name="some-text">
    ...
</form>

Merci encore à Alex Polo pour sa réponse

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top