Question

我是ajax的新手（并试图避免使用框架），我试图通过PHP检查是否设置了任何文件并显示$exists或true，但它没有用，所以我想知道我做错了什么

这是我的代码，HTML和JS：

false

<form class="file-upload" enctype="multipart/form-data" method="post" action="post.php"> <input type="file" name="fu-obj" id="fu-obj" /> <div data-file-upload></div> <script> // "fu" - file upload var fu = { response: document.querySelector('[data-file-upload]'), ele: document.querySelector('[name="fu-obj"]') }; fu['ele'].onblur = function() { if(fu['ele'].files.length > 0) { ajax.onreadystatechange = function() { if(this.status === 200 && this.readyState === 4) { fu['response'].innerHTML = this.responseText; } } ajax.open('POST', 'post.php', true); ajax.setRequestHeader('Content-type', 'multipart/form-data'); ajax.send('fu-obj='+fu['ele'].files[0].name); } } </script>  <button type="submit">Manual Upload</button> </form>文件非常简单且尚未执行任何操作，只包含post.php语句if()以检查其是否有效

更新我已将if(isset($_POST['fu-obj'])) { echo 'True'; } else { echo 'False'; }替换为$_POST，当我手动发送时，它可以正常工作（但不能使用ajax）

更新2 - ajax.js：

$_FILES

我该如何解决这个问题？非常感谢你！

（请不要建议jQuery解决方案，即使它更容易）

Answer 1

ajax.setRequestHeader('Content-type', 'multipart/form-data');

您声称发送了multipart/form-data

ajax.send('fu-obj='+fu['ele'].files[0].name);

然后您发送（可能无效，因为您忘记使用encodeURIComponent）数据编码为application/x-www-form-urlencoded。

然后，PHP无法解码数据，因为它尝试使用错误的编码。

在我引用的第一行中输入正确的内容类型。

你可以完全废弃XHR。将字符串传递给服务器以查看字符串是否已设置是一项昂贵的操作。你可以在普通的JS中轻松地做到这一点：

if (fu['ele'].files[0]) { ... }

Answer 2

您需要使用formData使用ajax将文件传递到服务器，（不要将其编码为uri）

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
        fu['response'].innerHTML = this.responseText;
    }
}
ajax.open('POST', 'post.php', true);
ajax.setRequestHeader('Content-type', 'multipart/form-data');
var data = new FormData();
data.append('fu-obj[]', fu['ele'].files[0], fu['ele'].files[0].name);
ajax.send(data);

此外，您的代码中未定义“ajax”，因此请对其进行定义。

AJAX（Raw JS）：上传图片

2 个答案: