javascript - 使用 Ajax 传递图像

Question

用于上传图像的 HTML 表单:

<form method="post" enctype="multipart/form-data">
<div>
<input type="file" id="image">
<button type="button" class="ImgSubmitButton" onclick="uploadImages();">UPLOAD IMAGE</button>
</div>
</form>

用于发送数据的 Javascript/Ajax。

var RequestObject = false;
if (window.XMLHttpRequest) {
    RequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function uploadImages() {
    if (RequestObject) {
        var formData = new FormData();
        var myfile = document.getElementById('image').files[0];
        formData.append('file', myfile);
        RequestObject.open("POST", "processFileA.php");

        RequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        RequestObject.onreadystatechange = function() {
            if (RequestObject.readyState == 4 && RequestObject.status == 200) {
                document.getElementById('err').innerHTML = RequestObject.responseText;
            }
        }
        RequestObject.send("data=" + formData);
    }
    return false;
}

PHP 很简单，只是检查数据是否已设置。

if(isset($_POST['data'])){ 
echo $_POST['data'];
echo "data is set";
} else {
echo "data is not set";
}

我检查了 3 个 header 请求。

第一:数据未设置。

RequestObject.setRequestHeader('Content-Type','multipart/form-data');

第二:数据未设置。

RequestObject.setRequestHeader('Content-Type', "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2));

第三:返回此[对象FormData]。

RequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

我也尝试过没有 header 请求并且未设置数据。

我知道如何通过使用 PHP 的常规表单提交来安全地处理表单，但不确定如何处理通过 Ajax 传递的 [object FormData]。如果他们有更好的方法或者我做错了什么，请告诉我。我的问题是如何通过 Ajax 正确发送图像文件来处理它，就像在 PHP 中以常规表单提交来正确处理它一样。

请不要使用 JQuery。

Answer 1

您在此字符串中遇到的问题:

RequestObject.send("data=" + formData);

当您尝试 String + formData 时，您进行了串联，并且 formData 转换为 String，正如我们所知 formData 它是对象。

这是发送数据的正确方法:

RequestObject.send(formData);

只需发送一个数据，如下例所示:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript