如何解决 Ajax XMLHttpRequest 文件上传中的'No Multipart Boundary”错误？

使用 Ajax XMLHttpRequest 上传文件：解决“无多部分边界”错误

尝试使用 XMLHttpRequest 上传文件时，您可能会遇到“请求被拒绝，因为未找到多部分边界”错误。为了解决这个问题，让我们深入研究所提供的代码并找出潜在的原因。

以下代码片段旨在使用 XMLHttpRequest 上传文件：

<code class="javascript">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);
});</code>

解决上述错误，需要解决两个关键点：

1. 行 xhr.file = file;是多余的和不必要的。不需要以这种方式附加文件对象。
2. 实际问题在于 xhr.send(file) 行。要正确上传文件，需要将其包装在 FormData 对象中，该对象会将其格式化为 multipart/form-data POST 数据对象。更新后的代码应如下所示：

<code class="javascript">...
var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);
...</code>

通过创建 FormData 对象并附加文件，您可以确保数据结构正确并准备好在服务器上进行处理。该文件现在可以在 $_FILES['thefile'] 中访问（如果您在服务器端使用 PHP），允许您适当地处理它。

参考 MDC 和 Mozilla 演示等文档资源在遇到此类问题时可以提供宝贵的指导。

以上是如何解决 Ajax XMLHttpRequest 文件上传中的'No Multipart Boundary”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！