Невозможно загрузить изображение на сервер, используя XMLHttpRequest

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 (по крайней мере, не кросс-браузерным способом, см. Эту статью для получения дополнительной информации )

Это потому, что XMLHttpRequest не поддерживает multipart / form-data, вы можете делать трюки, такие как использование iframe или использование flash.

В Интернете достаточно статей, объясняющих это.

• http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
• http://www.faqs.org/rfcs/rfc2388.html

Answer 2

Ваш код выглядит нормально.Причина, по которой вы не можете загрузить файл, может заключаться в том, что вы обращаетесь к серверу через localhost, а XMLHttpRequest не работает на localhost.Он выдает ошибку « Нет заголовка« Access-Control-Allow-Origin »на запрошенном ресурсе » каждый раз, когда вы пытаетесь загрузить файл, используя XMLHttpRequest, на локальный хостнеобходимо получить доступ к серверу, используя доменное имя или через IP-адрес

. Вы можете найти рабочий пример здесь .Ссылка также обсуждает вышеупомянутую проблему в разделе «Примечание».

Описание вышеупомянутой проблемы также можно найти по ссылке .