Как использовать AJAX для загрузки файла

Question

Я хочу использовать AJAX для загрузки.

Это мой HTML код

<form id="upload-form" enctype="multipart/form-data" method="post" action="upload"> 
    File Name：<input type="text" name="name" /><br /> 
    <input type="file" name="file" /><br /> 
    <input type="submit" /> 
</form> 

Это мой код JavaScript:

var file = document.querySelector("[type=file]").files[0], 
    reader = new FileReader; 

reader.onload = function(e){ 
    var xhr = new XMLHttpRequest 
    xhr.open("POST", document.querySelector("form#upload-form").action, true); 

    //set payload 
    var boundary = '------multipartformboundary' + (new Date).getTime().toString(16); 
    var dashdash = '--'; 
    var crlf = '\r\n'; 

    var payload = ''; 
    payload += boundary; 
    payload += crlf; 

    payload += 'Content-Disposition: form-data; name="file"'; 
    payload += crlf;  

    payload += 'Content-Type: ' + file.type; 
    if (file.fileName) { 
     payload += '; filename="' + file.name + '"'; 
    } 
    payload += crlf + crlf; 

    payload += reader.result; 
    payload += crlf; 


    payload += boundary; 
    payload += crlf; 
    payload += 'Content-Disposition: form-data; name="name"'; 
    payload += crlf + crlf; 
    payload += document.querySelector("[name=name]").value || "" 
    payload += crlf; 

    payload += boundary; 
    payload += dashdash; 

    xhr.setRequestHeader('Content-type', 'multipart/form-data; boundary=' + boundary) 
    xhr.send(payload) 
} 
reader.readAsBinaryString(file) 

Полезная нагрузка запроса выглядит следующим образом:

------multipartformboundary14e6631b3eb 
Content-Disposition: form-data; name="file" 
Content-Type: image/png 

PNG 


(some binary code) 
------multipartformboundary14e6631b3eb 
Content-Disposition: form-data; name="name" 

My test file 
------multipartformboundary14e6631b3eb-- 

Однако статус запроса .

В описании говорится: «Запрос, отправленный клиентом, был синтаксически неправильным». (Сервер Servlet + Tomcat 8)

Когда я просто отправлю форму без AJAX, она может успешно загрузиться. Поэтому я не думаю, что это проблема сервера.

Answer 1

В типа содержимого строки:

xhr.setRequestHeader('Content-type', 'multipart/form-data; boundary=' + boundary) 

Ваш код обеспечивают:

multipart/form-data; boundary=------xxxxxxxxx 

Но, должно быть:

multipart/form-data; boundary=----xxxxxxxxx 

Обратите внимание на количество тире.

Так изменить его:

xhr.setRequestHeader('Content-type', 'multipart/form-data; boundary=' + boundary.substr(2)) 

И попробуйте еще раз.

Answer 2

   var Self = this; 
        Self.xhr = new XMLHttpRequest(); 
        Self.url = "./connect.php"; // your file to post data 
        Self.xhr.open("POST",Self.url,true); 
        Self.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
        Self.xhr.onreadystatechange = function() { 
        if(Self.xhr.readyState == 4 && Self.xhr.status == 200) { 
        Self.return_data = Self.xhr.responseText.trim(); 

        } 
       Self.xhr.send(Self.logData); 

Это как данные POST для моего сервера с использованием запроса XHR. и connect.php обновит мою базу данных. поэтому вы можете добавить, какие данные вам нужно отправить в «Self.logData», прежде чем делать запрос XHR. и вам нужен файл типа connect.php или какой-либо другой для обработки данных сообщения на стороне сервера.