XMLHttpRequest 不发送文件答案

【问题标题】：XMLHttpRequest does not send fileXMLHttpRequest 不发送文件
【发布时间】：2014-08-30 16:32:53
【问题描述】：

我想通过 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 变量时，它加载了我要上传的文件中的数据。

谢谢！

【问题讨论】：

文件（上传）需要 POST 方法，而不是 GET。因此，如果您的表单方法设置为 GET，请将其更改为 POST。您也可以使用$_REQUEST 而不是$_GET，后者可用于POST 和GET。试试if($_REQUEST['ref'] == 'upload_kost')
@Fred-ii- ref=upload_kost 在 url 中，即它是一个 GET 参数。 XMLHttpRequest 作为 POST 打开，然后formData 作为 post 数据发送。
我认为这不是问题所在。正如你所看到的 hr.open("POST", url, true);它设置为发布。 vardump 被触发，但它只是空的
那么，upl_kost() 是怎么被调用的，还是根本没有被调用？
@Fred-ii-

标签： javascript php xmlhttprequest

【解决方案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 之前，您是否执行了重定向？

【讨论】：

好吧，我试过了，它说输入看起来没问题。我没有执行任何重定向。 proces_data.php 是我捕获所有 xmlhttprequests 的页面。我的帖子中的代码就是它。
您可以做的最终客户端检查是查看网络选项卡/启用 xmlhttprequest 的控制台日志记录，然后从控制台查看发送的数据是否确实包含文件（我是 99 % 肯定是的），那么您肯定知道问题出在服务器端。尝试做一个不在任何ifs/functions/etc 中的var_dump，例如使用只有 var_dump 的新 php 页面进行测试。
当我使用此代码并查看 xhr.responseText；其作品。我不知道为什么它适用于这段代码而不是我的，但它确实
即使我在尝试同样的事情，但它会在控制台日志中显示有关文件的所有数据，但是当我使用 xhr 将此数据发送到我的 upload.php 文件以使用 var_dump($_FILES) 捕获数据时在网络选项卡中显示空数组

【解决方案2】：

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

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

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

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

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

【讨论】：