使用Ajax XMLHttpRequest上传文件

Question

我正在尝试使用以下代码通过XMLHttpRequest发送文件。

var url= "http://localhost:80/....";
$(document).ready(function(){
    document.getElementById('upload').addEventListener('change', function(e) {
        var file = this.files[0];
        var xhr = new XMLHttpRequest();
        xhr.file = file; // not necessary if you create scopes like this
        xhr.addEventListener('progress', function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
        }, false);
        if ( xhr.upload ) {
            xhr.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
            };
        }
        xhr.onreadystatechange = function(e) {
            if ( 4 == this.readyState ) {
                console.log(['xhr upload complete', e]);
            }
        };
        xhr.open('post', url, true);
        xhr.setRequestHeader("Content-Type","multipart/form-data");
        xhr.send(file);
    }, false);
});

我遇到了这个错误：T

请求被拒绝，因为未找到多部分边界。

我做错了什么？

- Sedat Başar

Answer 1

1. xhr.file = file; 这种方式并不存在；文件对象不应该通过这种方式进行传递。

2. xhr.send(file) 并不会发送文件。您需要使用 FormData 对象将文件包装成一个 multipart/form-data 的POST数据对象：

   var formData = new FormData();
   formData.append("thefile", file);
   xhr.send(formData);
   

   之后，文件可以通过 $_FILES['thefile'] 访问（如果您正在使用 PHP）。
   
   请记住，MDC 和Mozilla Hack演示 是您的好朋友。 编辑：上面的(2)是不正确的。 它确实会发送文件，但会将其作为原始POST数据发送。 这意味着您必须在服务器上自己解析它（并且通常不可能，取决于服务器配置）。 阅读有关如何在PHP中获取原始POST数据的文章here。

- timdream

---

xhr.send(file) 是基于 XHR2 的，它是 XMLHttpRequest 对象的新版本，仅在某些浏览器中可用。 - nkassis

@nkassis 是的，但它会将文件本身作为帖子正文发送，而不是构造一个多部分的帖子数据供服务器解析。 - timdream

该方法需要使用至少 IE10 或 Android 3.0。 - andreszs

@gmustudent 是的，请继续添加。MDN有一篇关于这个主题的优秀文章使用FormData对象。 - Rick

Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob' - Abhi

Answer 2

一个更详细的答案：

let formData = new FormData();
formData.append("fileName", audioBlob);

$.ajax({
    "url": "https://myserver.com/upload",
    "method": "POST",
    "headers": {
        "API-Key": "myApiKey",
    },
    "async":        true,
    "crossDomain":  true,
    "processData":  false,
    "contentType":  false,
    "mimeType":     "multipart/form-data",
    "data":         formData
}).done(function(response){

    console.log(response);

});

- Mostafa Mohammadzadeh