如何使用包含文件和后期数据的JavaScript创建AJAX请求

Question

如何创建一个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);

为了实现这个目的，我需要一个'file'变量，它包含一个输入类型文件字段，但是在哪里放置额外的post数据？我也想发送一个描述文本。假设我还需要使用xhr.send发送请求...

Answer 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的输入。您可以拥有与要POST的变量一样多的Content-Disposition。

当然，如果你使用像jQuery这样的js框架，可以简化许多管道。这是一个excellent plugin，do the job。

Answer 2

为什么不使用jquery？它可以帮助您设置自己的XHR请求。

Answer 3

AFAIK无法使用XmlHttpRequest发送文件。