javascript 使用formdata时如何在XMLHttpRequest中添加头数据?

ha5z0ras  于 2023-03-11  发布在  Java
关注(0)|答案(3)|浏览(182)

我正在尝试实现一个文件上传API,如下所示:
Mediafire文件上传
我能够成功上传 *Post数据 * 和 *Get数据 *,但不知道如何发送x-filename属性,该属性是API指南中给出的 *Header数据 *。
我的代码:

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);
lztngnrs

lztngnrs1#

您的错误
无效状态错误:试图使用的对象不可用或不再可用
出现,因为您必须在 * 调用open之后 * 调用setRequestHeader。只需将setRequestHeader行移动到open行下方(但在send之前):

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

tzdcorbm2#

用途:xmlhttp.setRequestHeader(key, value);

smdnsysy

smdnsysy3#

检查键值对是否确实出现在请求中:
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()之前即可

相关问题