为什么我的XMLHttpRequest会在PHP文件上传时中止？

Question

我试图通过AJAX、XMLHttpRequest和PHP上传一个视频文件，以显示上传进度，但是如果我试图上传什么东西，请求会抛出一个中止并快速刷新页面。

如果我只是通过表单将POST请求发送到PHP文件，而没有AJAX/XMLHttpRequest，那么文件上传就可以了。但是进度条会很方便..。

代码由HTML、JavaScript函数和PHP组成(我省略了进度条HTML代码，以提高其可读性)。

HTML:

<form action="" method="post" enctype="multipart/form-data" id="uploadForm">
    <input type="file" accept="video/mp4" class="form-control" name="fileToUpload" id="fileToUpload" onclick="closeFileToBigAlert()" onchange="checkFile(this.files)" required>
    <button onclick="uploadFile()" class="btn">Upload</button>
</form>

JavaScript:

function uploadFile(){
    // Get the file
    var file = document.getElementById("fileToUpload").files[0];

    // Create FormData object and append file as "file"
    var formData = new FormData();
    formData.append("file",file);

    // Create XMLHttpRequest object
    var ajax = new XMLHttpRequest();

    // Add Event Listeners
    ajax.upload.addEventListener("upload-progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);

    // Open upload.php and send POST request
    ajax.open("POST", "upload.php");
    ajax.send(formData);
}

function progressHandler(event){
    // Calculate percentage
    var percent = (event.loaded / event.total) * 100;

    // Insert percentage number into progress bar
    var bar = document.getElementById("upload-progress");
    bar.setAttribute("aria-valuenow", Math.round(percent));
    bar.setAttribute("style", "width: "+ Math.round(percent) +"%");
    bar.innerHTML = Math.round(percent) + "%";
}

function completeHandler(event){
    document.getElementById("status").innerHTML = event.target.responseText;
    var bar = document.getElementById("upload-progress");
    bar.setAttribute("aria-valuenow", "0");
    bar.setAttribute("style", "width: 0%");
    bar.innerHTML = "0%";
}

function errorHandler(event){
    document.getElementById("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
    document.getElementById("status").innerHTML = "Upload Aborted";
}

和PHP:

$fileName = $_FILES["file"]["name"];
$fileTmpLoc = $_FILES["file"]["tmp_name"];
$fileType = $_FILES["file"]["type"];
$fileSize = $_FILES["file"]["size"];
$fileErrorMsg = $_FILES["file"]["error"];

if(move_uploaded_file($fileTmpLoc, "uploads/$fileName")){
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}

知道为什么请求会立即中止和刷新页面吗？PHP日志为空。

环境是通过XAMPP本地的。

Answer 1

你在提交表格。JS启动，然后表单提交，然后导航到一个新页面(该页面从上一页中止所有JS )。

attribuete

• Bind

1. 删除表单
2. 上的提交事件处理程序onclick
3. ，防止表单提交(

)附带的默认行为。

这种情况如下：

document.querySelector(`#uploadForm`).addEventListener('submit', event => {
    event.preventDefault();
    // Do everything else
});