Question

我正在尝试使用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);        

}

任何想法在这里都错了。我得到（一个空字符串）作为响应..文件没有上传到服务器。伙计们请帮帮忙。

Answer 1

您根本无法使用纯Javascript上传文件（至少不能以跨浏览器的方式上传see this article for more information）

这是因为XMLHttpRequest不支持multipart / form-data，你可以做一些使用iframe或使用flash的技巧。

互联网上有足够的文章可以解释这一点。

Answer 2

您的代码看起来很好。您无法上传文件的原因可能是您通过localhost访问服务器而XMLHttpRequest无法在localhost上运行。它会出现错误＆＃34; No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在请求的资源上 ＆＃34;每当您尝试使用XMLHttpRequest将文件上传到localhost时，您需要做的是使用域名或通过IP地址访问服务器

您可以找到一个有效的例子here。该链接还在注释部分讨论了上述问题。

您还可以在link找到上述问题的说明。

无法使用XMLHttpRequest将图像上传到服务器

2 个答案: