用于上传图像的 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。
最佳答案
您在此字符串中遇到的问题:
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
关于javascript - 使用 Ajax 传递图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53994042/