javascript 无法使用 XMLHttpRequest 将图像上传到服务器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6304699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to upload image to server using XMLHttpRequest
提问by Amal Kumar S
I am trying to upload an image to server using using XMLHttpRequest but fails. Below is the code I am using.
我正在尝试使用 XMLHttpRequest 将图像上传到服务器，但失败了。下面是我正在使用的代码。
<input type="submit" onclick="fn()" value="Click"/>
<script type="text/javascript">
function fn(){
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}
catch (e) {
console.log("Not firefox");
}
xmlhttp = new XMLHttpRequest();
var requestUrl = "http://localhost:9000/laptop.png";
xmlhttp.open("GET",requestUrl,true);
xmlhttp.overrideMimeType("text/plain; charset=x-user-defined");
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status == 200) {
imageDataPost(xmlhttp.responseText);
console.log(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}
function imageDataPost(imgData) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}
catch (e) {
console.log("Not firefox");
}
xmlhttp = new XMLHttpRequest();
var requestUrl = "http://server_url/fileupload/";
xmlhttp.open("POST",requestUrl,true);
xmlhttp.overrideMimeType("text/plain; charset=x-user-defined");
xmlhttp.setRequestHeader("Content-type", "multipart/form-data");
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status == 200) {
alert("success");
console.log(xmlhttp.responseText);
}
else {
alert("Failed");
}
}
}
xmlhttp.send("upload="+imgData);
}
Any Idea whats wrong here. I am getting (an empty string) as response.. File is not uploaded to server. Guys please help.
任何想法这里有什么问题。我得到（一个空字符串）作为响应。文件没有上传到服务器。伙计们请帮忙。
回答by Melvin
You simply can't upload a file with pure Javascript (at least not in a cross browser way, see this article for more information)
您根本无法使用纯 Javascript 上传文件（至少不能以跨浏览器的方式上传，请参阅此文章了解更多信息）
This is because XMLHttpRequest has no support for multipart/form-data, you can do tricks like using an iframe or use flash.
这是因为 XMLHttpRequest 不支持 multipart/form-data，您可以使用 iframe 或使用 flash 之类的技巧。
There are enough articles on the internet that explain this.
互联网上有足够多的文章来解释这一点。
回答by yatharth varshney
Your code looks fine. The reason you are not able to upload file may be since you are accessing the server through the localhost and XMLHttpRequest does not work on localhost. It gives an error "No 'Access-Control-Allow-Origin' header is present on the requested resource" whenever you try to upload a file using XMLHttpRequest to the localhost, what you need to do is access the server using a domain name or through the IP Address
你的代码看起来不错。您无法上传文件的原因可能是因为您通过 localhost 访问服务器，而 XMLHttpRequest 在 localhost 上不起作用。每当您尝试使用 XMLHttpRequest 将文件上传到本地主机时，它都会给出错误“请求的资源上不存在‘Access-Control-Allow-Origin’标头”，您需要做的是使用域名访问服务器或通过 IP 地址
You can find a working example here. The link also discusses the above mentioned problem in the Note section.
你可以在这里找到一个工作示例。该链接还在注释部分讨论了上述问题。
You can also find a description of above problem at the link.
您还可以在链接中找到上述问题的描述。
