无法使用 XMLHttpRequest 将图像上传到服务器
我尝试使用 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);
}
任何想法这里出了什么问题。我收到（空字符串）作为响应。文件未上传到服务器。请大家帮忙。
I am trying to upload an image to server using using XMLHttpRequest but fails. Below is the code I am using.
<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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您根本无法使用纯 Javascript 上传文件（至少不能以跨浏览器的方式上传文件，请参阅这篇文章以获取更多信息）
这是因为 XMLHttpRequest 不支持 multipart/form-data，您可以使用 iframe 或使用 flash 等技巧。
互联网上有足够多的文章解释了这一点。
You simply can't upload a file with pure Javascript (at least not in a cross browser way, see this article for more information)
This is because XMLHttpRequest has no support for multipart/form-data, you can do tricks like using an iframe or use flash.
There are enough articles on the internet that explain this.
你的代码看起来不错。您无法上传文件的原因可能是因为您通过本地主机访问服务器，而 XMLHttpRequest 在本地主机上不起作用。每当您尝试使用 XMLHttpRequest 将文件上传到本地主机时，它都会给出错误“请求的资源上不存在“Access-Control-Allow-Origin”标头”，你需要做的是使用域名或通过IP地址访问服务器
你可以找到一个工作示例此处。该链接还在注释部分讨论了上述问题。
您还可以在 链接。
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
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.