如何使用包含文件和发布数据的 JavaScript 创建 AJAX 请求答案

【问题标题】：How to create an AJAX request with JavaScript that contains both file and post data如何使用包含文件和发布数据的 JavaScript 创建 AJAX 请求
【发布时间】：2011-04-11 01:48:44
【问题描述】：

如何创建一个 HTTP 请求，该请求使用 PHP 服务器可以接收的 JavaScript 发送一个文件和一些发布数据？

我找到了以下建议，但似乎并不完整

xhr.open("POST", "upload.php");
var boundary = '---------------------------';
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
xhr.setRequestHeader("Content-Type", 'multipart/form-data; boundary=' + boundary);
var body = '';
body += 'Content-Type: multipart/form-data; boundary=' + boundary;
//body += '\r\nContent-length: '+body.length;
body += '\r\n\r\n--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="';
body += 'myfile"; filename="'+file.fileName+'" \r\n';
body += "Content-Type: "+file.type;
body += '\r\n\r\n';
body += file.getAsBinary();
body += '\r\n'
body += '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="submitBtn"\r\n\r\nUpload\r\n';
body += '--' + boundary + '--';
xhr.setRequestHeader('Content-length', body.length);

为了让这个工作，我需要一个包含输入类型文件字段的“文件”变量，但是在哪里放置额外的帖子数据？我也想发送描述文本。假设我还需要使用 xhr.send 来发送请求...

【问题讨论】：

标签： javascript ajax http file-upload xmlhttprequest

【解决方案1】：

额外的 POST 数据应作为另一个 Content-Disposition 放置。示例：

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--AaB03x--

这里发送了两个变量：要上传的文件和名称 = "submit-name" 和值 Larry 的输入。您可以拥有与想要发布的变量一样多的 Content-Disposition。

当然，如果您使用像 jQuery 这样的 js 框架，则可以简化大部分管道。这是excellent plugin，应该是do the job。

【讨论】：

感谢您的提示，我会尝试的。

【解决方案2】：

为什么不使用jquery？它使您无需设置自己的 XHR 请求。

【讨论】：

我想知道如何使用 JavaScript 创建正确的 HTTP 请求。

【解决方案3】：

AFAIK 无法使用 XmlHttpRequest 发送文件。

【讨论】：

使用base64当然可以。
您可以随意添加对此问题的答案。
@ZippyV：当然。 stackoverflow.com/questions/5773626/…我的问题回答了这个问题。欢迎您帮助我解决我的问题。
不，它没有。您无法从对象获取文件的内容。
不，你不能，但你可以使用base64。啊，等等。你甚至可以从文件输入中获取文件内容，但是，只有在 FF4 中。