使用 XMLHttpRequest 发送带有数据的文件答案

【问题标题】：using XMLHttpRequest send file with data使用 XMLHttpRequest 发送带有数据的文件
【发布时间】：2012-05-14 12:19:53
【问题描述】：

我正在尝试 ajaxlly 上传一个文件，包括我想用它添加一个帖子数据

var xhr = this._xhrs[id] = new XMLHttpRequest();
var queryString = qq.obj2url(params, this._options.action);
        xhr.open("POST", queryString, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
        xhr.setRequestHeader("Content-Type", "application/octet-stream");
        xhr.send(file);

如何将x=y 添加为帖子数据？

【问题讨论】：

标签： javascript xmlhttprequest

【解决方案1】：

var file = $("#file_input")[0].files[0];
//for pure javascript use
var file = document.querySelector('input[type=file]')[0].files[0];

var formData = new FormData();
formData.append("myfile", file);
formData.append("text_unput", "Hello");

var xhr = new XMLHttpRequest();
xhr.open('POST', '/url', true);
xhr.send(formData);

【讨论】：

解决方案已确认。这应该是选定的答案。

【解决方案2】：

正确的新答案

看@habibutsu's answer below

错误的旧答案

您不能以 x=y&w=z 的形式发布文件和表单数据。它们是两种不同的内容类型。

对于 x=y，您应该使用如下内容类型：application/x-www-form-urlencoded

我建议您将 AJAX 请求拆分为两个不同的或将这些数据插入 url：myUrl + 'query.php?x=y'。

调

威尔

【讨论】：