如何使用AJAX上传文件

Question

I want to use AJAX to upload.

This is my HTML code

<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>

This is my Javascript code:

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)

The payload of the request looks like:

------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--

However, the request status is 400 .

The description says "request sent by the client was syntactically incorrect." (Server is Servlet + Tomcat 8)

When I just submit the form without AJAX, it can upload successfully. Therefore, I do not think it is the server's issue.

Answer 1

In the content-type line:

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

Your code provide:

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

But, it should be:

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

Notice the number of dash.

So change it to:

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

And try again.

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);

This is how i POST data to my server using XHR request. and connect.php will update my Database. so you can add what ever the data you need to send to "Self.logData" before making XHR request. and you need a file like connect.php or some other to handle the post data at server side .