Question

我想通过XMLHttpRequest上传文件。我到处寻找例子，发现了不少。但我无法弄明白我做错了什么。这是我的代码。按下按钮时会触发该功能。它没有包含在标签中

function upl_kost() {
var url = "proces_data.php?ref=upload_kost";
var hr;
var file = document.getElementById("file_kost");
var formData = new FormData();

formData.append("upload", file.files[0]);

if (window.XMLHttpRequest) {
    hr=new XMLHttpRequest();
  } else {
    hr=new ActiveXObject("Microsoft.XMLHTTP");
  }
hr.open("POST", url, true);

hr.setRequestHeader("Content-type", "multipart/form-data");

hr.onreadystatechange = function() {
   if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        alert(return_data);
    }
}
hr.send(formData);
}

并且此功能可以捕获它。

if($_GET['ref'] == 'upload_kost') {
var_dump($_FILES);
}

我的问题是$ _FILES保持空白。当我查看js中的file.files变量时，它加载了我试图上传的文件中的数据。

谢谢！

Answer 1

将 JavaScript 降低到最低要求，然后在控制台中添加一些有用的消息

function upl_kost() {
    var xhr = new XMLHttpRequest(),
        url = 'proces_data.php?ref=upload_kost',
        fd = new FormData(),
        elm = document.getElementById('file_kost');

    // debug <input>
    if (!elm)
        console.warn('Element not found');
    else if (!(elm instanceof HTMLInputElement))
        console.warn('Element not an <input>');
    else if (!elm.files || elm.files.length === 0)
        console.warn('<input> has no files');
    else
        console.info('<input> looks okay');
    // end debug <input>

    fd.append('upload', elm.files[0]);

    xhr.addEventListener('load', function () {
        console.log('Response:', this.responseText);
    });

    xhr.open('POST', url);
    xhr.send(fd);
}

如果您仍然遇到问题，可能是服务器端，例如您在尝试访问$_FILES之前是否正在执行重定向？

Answer 2

您的问题是您正在设置请求的内容类型

hr.setRequestHeader("Content-type", "multipart/form-data");

如果你看过一个multipart / formdata帖子，你会注意到内容类型标题有一个边界

Content-Type: multipart/form-data; boundary=----webko2354645675756

您的代码中缺少

如果未设置内容类型标题，浏览器将正确设置它和所需的边界。这将允许服务器正确解析请求正文。

XMLHttpRequest不发送文件

2 个答案: