表单数据附加不起作用

我写这篇文章是为了使用 HTML 中的 input元素将一张图片上传到我的本地 Apache HTTP Server。file被记录为不是空的，但是为什么 form_data是完全空的？

$('#upload-image').change(function(e){
var file = e.target.files[0];
var imageType = /image.*/;
if (!file.type.match(imageType))
return;
console.log(file);
var form_data = new FormData();
form_data.append('file', file);
console.log(form_data);
$.ajax({
url: 'http://localhost/upload.php',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'POST',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});


});

这是我在本地网络服务器上的 upload.php

<?php
header('Access-Control-Allow-Origin: *');
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
$target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name'];
echo $target_path;
}
?>

console.log(response)记录 PHP 文件的所有代码行，而不是返回的 echo结果

141487

小开

最佳答案

当仅使用 console.log(formData)记录 formData 对象时，它总是返回空值，因为不能记录 formData。

如果在发送之前必须记录它，那么可以使用 entries()获取 formData 对象中的条目

$('#upload-image').change(function(e) {
var file = e.target.files[0];
var imageType = /image.*/;


if (!file.type.match(imageType)) return;


var form_data = new FormData();
form_data.append('file', file);


for (var key of form_data.entries()) {
console.log(key[0] + ', ' + key[1]);
}


$.ajax({
url: 'http://localhost/upload.php',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'POST',
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});


});