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

Posted 2023-02-27

【中文标题】使用formdata时如何在XMLHttpRequest中添加头数据？

【英文标题】：How to add header data in XMLHttpRequest when using formdata?

【发布时间】：2013-11-08 18:45:09

【问题描述】：

我正在尝试实现文件上传 API，此处给出： Mediafire file Upload

我能够成功上传发布数据和获取数据，但不知道如何发送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);

【问题讨论】：

你能给我们setRequestHeader的错误文本吗？

它是javascirpt，因此没有错误文本，脚本只是停止执行，可能是不允许的

澄清一下，您的意思是您的browser's javascript console 中没有错误？

@apsillers 哦，我从来没有新的 abt Javascript Console 错误：未捕获的 InvalidStateError：尝试使用不可用或不再可用的对象。 upload.php:42 uploadAjax upload.php:42 onclick upload.php:130

@apsillers 第 42 行是 setrequestheader 行 & 第 130 行有一个带有 onclick 属性的按钮，可以调用上述代码

【参考方案1】：

你的错误

InvalidStateError：尝试使用不可用或不再可用的对象

出现是因为您必须调用setRequestHeader 之后调用open。只需将您的setRequestHeader 行移到您的open 行下方（但在send 之前）：

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

【讨论】：

摆脱了错误，但仍然无法正常工作。由于同源策略，实际上无法从 mediafire 获得响应。不知道问题出在哪里，请检查Mediafire API 并让我知道问题出在哪里，文件已成功上传到 mediafire 而无需进行此编辑，现在什么都没有上传！

没有上传该行文件，但使用默认名称！

这让事情变得更清楚了。见Understanding XMLHttpRequest over CORS。同源策略允许“简单”请求到达客户端，然后决定客户端是否可以读取结果。 “非简单”请求在发送实际请求之前通过“预检”请求进行验证。添加非简单标头将您的请求从简单更改为非简单。在这两种情况下，我都假设您无法读取服务器的响应？

或者对于解决方法，我可以在将上传文件发送到 mediafire 之前更改其名称吗？然后我就不需要发送额外的参数了。

哦，很高兴知道添加标头会使请求变得不简单。感谢您的帮助:)

【参考方案2】：

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

【讨论】：

我也试过了，javascript在这个语句后停止执行，不起作用！ （将其添加到我的问题中）

【参考方案3】：

检查键值对是否真的出现在请求中：

在 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() 之前