处理来自 AJAX 请求/响应的 PHP 上传文件错误代码 NO JQuery

Question

我想在不选择文件的情况下提交表单，通常我得到 php 错误代码编号 4 => 没有从 $_FILES['file']['error'] 上传的文件如果我只使用 HTML 和 PHP，一切都很好，但当我添加 AJAX 时就不行！

我的问题：

• 我不知道如何发布/发送空文件数组以便能够处理 它在 php 脚本中！
• 我不知道如何将响应写回 AJAX 脚本，它应该是正在进行的处理程序，还是错误处理程序，或者我不知道...！
• 我不想使用 JQuery，我复制/粘贴我的所有代码来构建任何东西，因为我的编码处于 0 级，所以我需要理解每一行，而 JQuery 在我看来就像星际空间！

形式：

<form id="upload_form" enctype="multipart/form-data" method="post" >

    <input type="file" name="file" id="file_id" /><br />
    <input type="button" value="Upload File" onclick="uploadFile()" /><br />

</form> 

JS 脚本：

<script>
function uploadFile(){

    // target the file that is to be uploaded
    var file = document.getElementById("file_id").files[0];
    // var file = document.getElementById("file_id"); is not working,
    // what is files ? why do i need .files[0]?

    // Create a new formdata object instance
    var formdata = new FormData();

    // append the file to the formdata
    formdata.append("file", file); 
    // on submit, if no file selected, the error index is 4 in php
    // do i have to append the file error here ?

    // Build the AJAX request
    var xhr = new XMLHttpRequest(); 

    // add event listeners

    // progress handler 
    xhr.upload.addEventListener("progress", progress_handler, false);

    // complete handler        
    xhr.addEventListener("load", complete_handler, false);

    // error handler
    xhr.addEventListener("error", error_handler, false);

    // abort handler
    xhr.addEventListener("abort", abort_handler, false);


    // open a php script
    xhr.open("POST", "file_upload.php");

    // send the AJAX request
    xhr.send(formdata);
}

function progress_handler(event){  
    // create a progress bar, or a % of uploading...
    // using event.loaded and event.total (returns size in bytes)
}

// when the operation is finished
function complete_handler(event){

    // the message php is echoing will be put inside that div
    // using responseText !
    document.getElementById("some_div").innerHTML = event.target.responseText;
    // can we echo back other things beside strings, like an array, int... ?

    //set the progress bar to full
}

function error_handler(event){
    document.getElementById("status").innerHTML = "Upload failed !";
    // do i need to append the error here instead ? how ?
    // nothing that i tried around $_FILES[file]['error'] in php worked back here !
}

function abort_handler(event){
    //cancel listener if the file upload is aborted
    document.getElementById("status").innerHTML = "Upload aborted !";

}
</script>

php 文件：file_upload.php

<?php

echo '<pre>';  print_r($_FILES);  echo '</pre>';
// this is working when file is selected and echo back all array elements
// but why there NOTHING returned when no file selected, not even en empty array !!!
// -----------------------------------------------------

if(isset($_FILES['file']) AND $_FILES['file']['error'] == 0) 
{
    // move the file from the tmp folder to upload folder in website
}
else
{
    echo "Error : Please select a file before clicking the Upload button !";
    // i don't want this which is working!

    echo $_FILES["file"]["error"]; 
    // i want this which is working only without AJAX !!!
    // and would be : 
    // 1 > The uploaded file exceeds the upload_max_filesize directive in php.ini
    // ...
    // 4 > No file was uploaded at all !
    // until 
    // 8 > a php extension stopped the upload...
}
?>

非常感谢。

Answer 1

您应该防止内容类型自动检测。 我是这样做的（使用 jQuery）

 $.ajax({
            url: "<YOUR URL HERE>",
            data: formData, //filled formData instance
            type: "POST",
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false
        })

它适合我。