我想首先提到，我使用的是香草Javascript和PHP，而不是jquery。我在下面发布的代码只是一个片段。我没有在javascript中包含PHP文件或其他代码。
现在，我遇到的问题是，每当我单击保存按钮并激活事件时，除了表单数据发布之外，没有其他代码运行。我在事件开始和结束时都有一个控制台日志，用于测试是否有其他代码运行，但它从来没有运行过。表单数据，在本例中是一张图片，被发布到PHP rest API文件并存储在一个文件夹中，但我没有从发布到的PHP文件中收到JSON响应，我最大的问题是，在javascript代码的情况下，除了发布请求之外，没有其他代码运行。console.log(测试1和测试2(都不会出现。
当我用任何其他类型的数据(例如JSON(测试post请求时，一切都能完美地工作。事件中的所有代码都会运行，我可以从发出请求的同一个PHP文件接收JSON响应。发布表单数据会导致这个错误。我希望我已经足够清楚地解释了这一点。感谢您的帮助。
save_bg_btn.addEventListener('click', save_background_picture);
async function save_background_picture(){
console.log("test 1");
const formData = new FormData();
const save_files_background_pic = file_bg_pic.files[0];
const url = 'http://localhost/test/background-cover.php';
formData.append("file_bg_pic", save_files_background_pic);
await post_formdata_request(url, formData)
.then(data =>{
console.log(data);
})
.catch(err => console.log(err));
console.log(test 2);
}
function post_formdata_request(url, formData){
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err));
});
}
假设此按钮位于form中，我认为您需要为单击事件添加preventDefault()，否则表单将提交并刷新页面。另外，修复第二个console.log，因为它破坏了我的测试，直到我也注意到它。
async function save_background_picture(e){
e.preventDefault();
// ...rest of the code
console.log("test 2"); // <--- needed quotes
}
html文件：test-fetch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="myForm">
<input type="file" id="inpFile">
</form>
</body>
<script>
const inpFile = document.getElementById('inpFile');
const myForm = document.getElementById('myForm');
myForm.addEventListener('change', inpFunction);
async function inpFunction(e){
e.preventDefault();
const endpoint = "http://localhost/php-practice/test-fetch.php";
const formData = new FormData();
formData.append('inpFile', inpFile.files[0]);
fetch(endpoint, {
method: 'post',
body: formData
})
.catch(err => console.log(err));
}
</script>
</html>
这是php文件：test-fetch.php
<?php
$file = $_FILES['inpFile'];
$fileName = $_FILES['inpFile']['name'];
$fileTmpName = $_FILES['inpFile']['tmp_name'];
$fileSize = $_FILES['inpFile']['size'];
$fileError = $_FILES['inpFile']['error'];
$fileType = $_FILES['inpFile']['type'];
$fileExt = explode('.', $fileName);
$fileActualExt = strtolower(end($fileExt));
$allowed = array('jpg', 'jpeg', 'png', 'pdf');
if(in_array($fileActualExt, $allowed)){
if($fileError === 0){
if($fileSize < 2000000){
$fileNameNew = uniqid('', true).".".$fileActualExt;
$fileDestination = 'images/'.$fileNameNew;
move_uploaded_file($fileTmpName, $fileDestination);
}else{
echo "Your file is too large!";
}
}else{
echo "There was an error uploading your file!";
}
}else{
echo "You cannot upload files of this type!";
}
echo 'Success';
?>
现在，如果您添加任何其他代码，例如函数"中的控制台日志；inpFunction"；它不会运行。将运行的唯一代码是将表单数据发布到php文件的fetch。这个问题真让我困惑。
edit：php文件需要一个名为"的文件夹；图像"；因为这是正在发布的任何图片的路径目的地。