一尘不染

使用Ajax XmlHttpRequest上传文件

javascript

嗨,我正在尝试使用此代码发送带有xmlhttprequest的文件。

<script>
    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);
    });
</script>

但我收到此错误:请求被拒绝,因为未找到多部分边界,请帮助我。


阅读 958

收藏
2020-05-01

共1个答案

一尘不染

  1. 没有这样的事情xhr.file = file;; 文件对象不应该以这种方式附加。
  2. xhr.send(file)不发送文件。您必须使用FormData对象将文件包装到multipart/form-datapost数据对象中:
    var formData = new FormData();
    

    formData.append(“thefile”, file);
    xhr.send(formData);

之后,可以访问文件$_FILES['thefile'](如果您使用的是PHP)。

编辑
:(2)以上不正确。它确实发送了文件,但是会将其作为原始发布数据发送。这意味着您必须自己在服务器上解析它(通常不可能,取决于服务器配置)。在此处阅读如何在PHP中获取原始发布数据。

2020-05-01