web-dev-qa-db-fra.com

Comment ajouter des données d'en-tête dans XMLHttpRequest lors de l'utilisation de formdata?

J'essaie d'implémenter une API de téléchargement de fichier, donnée ici:
Téléchargement de fichier Mediafire

Je parviens à télécharger le Publier des données & Obtenir des données, mais je ne sais pas comment envoyer le x- l'attribut filename , qui est censé être données d'en-tête comme indiqué dans le guide de l'API.

Mon code:

xmlhttp=new XMLHttpRequest();
var formData = new FormData();

formData.append("Filedata", document.getElementById("myFile").files[0]);

var photoId = getCookie("user");
// formData.append("x-filename", photoId);            //tried this but doesn't work
// xmlhttp.setRequestHeader("x-filename", photoId);   //tried this too (gives error) [edited after diodeous' answer]

xmlhttp.onreadystatechange=function()
{
    alert("xhr status : "+xmlhttp.readyState);
}

var url = "http://www.mediafire.com/api/upload/upload.php?"+"session_token="+getCookie("mSession")+"&action_on_duplicate=keep";

xmlhttp.open("POST", url);
// xmlhttp.setRequestHeader("x-filename", photoId);   //tried this too, doesnt work. Infact nothing gets uploaded on mediafire.  [edited after apsillers' answer]
// cant get response due to same Origin policy
xmlhttp.send(formData);
javascripthttp-headersxmlhttprequestform-datamediafire
52
Rajdeep Siddhapura

Votre erreur

InvalidStateError: Une tentative d'utilisation d'un objet qui n'est pas ou n'est plus utilisable a été effectuée

apparaît car vous devez appeler setRequestHeaderafter en appelant open. Déplacez simplement votre ligne setRequestHeader sous votre ligne open (mais avant send):

xmlhttp.open("POST", url);
xmlhttp.setRequestHeader("x-filename", photoId);
xmlhttp.send(formData);
87
apsillers

Utilisez: xmlhttp.setRequestHeader(key, value);

37
Diodeus - James MacFarlane

Vérifiez si la paire clé-valeur apparaît réellement dans la demande:

Dans Chrome, trouvé quelque part comme: F12: Developer Tools > Network Tab > Whatever request you have sent > "view source" under Response Headers

En fonction de votre flux de tests, si la paire que vous avez ajoutée n’est pas présente, il vous suffira peut-être d’effacer le cache de votre navigateur. Pour vérifier que votre navigateur utilise le code le plus récent, vous pouvez consulter les sources de la page dans Chrome, ce qui se trouve quelque part comme: F12: Developer Tools > Sources Tab > YourJavascriptSrc.js, Puis vérifiez votre code.

Mais comme d'autres réponses l'ont dit:

xhttp.setRequestHeader(key, value);

si vous devez ajouter une paire clé-valeur à l’en-tête de votre requête, veillez simplement à la placer après votre open() et avant votre send().

1
Broper