web-dev-qa-db-ja.com

formdataを使用するときにXMLHttpRequestにヘッダーデータを追加するにはどうすればよいですか？

ここにあるファイルアップロードAPIを実装しようとしています。
Mediafireファイルのアップロード

Post data＆Get dataをアップロードできましたが、x-filename属性。APIガイドに記載されているHeader dataを意味します。

私のコード：

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

あなたのエラー

InvalidStateError：使用できない、または使用できなくなったオブジェクトを使用しようとしました

setRequestHeaderを呼び出す必要があるために表示されます後openを呼び出します。 setRequestHeader行をopen行の下に移動します（ただし、sendの前）。

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

使用：xmlhttp.setRequestHeader(key, value);

37
Diodeus - James MacFarlane

キーと値のペアが実際にリクエストに表示されているかどうかを確認します。

Chromeでは、次のような場所にあります：F12: Developer Tools > Network Tab > Whatever request you have sent > "view source" under Response Headers

テストワークフローによっては、追加したペアが存在しない場合は、ブラウザのキャッシュをクリアするだけで済みます。ブラウザが最新のコードを使用していることを確認するには、Chromeでページのソースを確認します。これはF12: Developer Tools > Sources Tab > YourJavascriptSrc.jsのような場所にあり、コードを確認します。

しかし、他の答えが言っているように：

xhttp.setRequestHeader(key, value);

リクエストヘッダーにキーと値のペアを追加する必要があります。必ず、open()の後、send()の前に配置してください。

1
Broper