javascript - FILE ["file1"] 不是通过 AJAX 设置的

Question

我是文件上传新手，不太确定出了什么问题。每次我尝试上传文件时，服务器都会响应说“文件未上传”，因为未设置 $_FILE["file1"] 。它与 getimagesize() 的 $_FILES["file1"]["tmp_name"] 相同。我直觉我的 AJAX 请求有问题。

• PHP INI 文件的 file_uploads = On
• 我的文件在最大文件上传大小范围内
• 我使用 .jpg 文件进行测试。

PHP 文件上传代码:

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file1"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(!isset($_FILES["file1"])){ //File is always not set ?
    echo "File not Uploaded";
    die();
}
$check = getimagesize($_FILES["file1"]["tmp_name"]);
if ($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
} else {
    echo "File is not an image.".$_FILES["file1"]["error"];
    $uploadOk = 0;
    die();
}

// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
    die();
}
// Check file size
if ($_FILES["file1"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
    die();
}
// Allow certain file formats
if ($imageFileType !== "jpg" && $imageFileType !== "png" && $imageFileType !== "jpeg" && $imageFileType !== "gif") {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
    die();
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
    die();
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["file1"]["tmp_name"], $target_file)) {
        echo "The file " . basename($_FILES["file1"]["name"]) . " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}

AJAX 上传脚本:

function _(str) {
    return document.getElementById(str);
}
function uploadFile() {

    var formData = new FormData($('form')[0]);
    alert(formData);
    $.ajax({
        url: 'file.php', //Server script to process data
        type: 'POST',
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false,
        xhr: function () {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        success: function (data) {
            _("filename").innerHTML = data;
        },
    });

    function progressHandlingFunction(e) {
        if (e.lengthComputable) {
            $('progress').attr({value: e.loaded / e.total, max: e.total});
        }
    }
}

HTML 文档:

<form action='/' method='post' enctype="multipart/form-data">
    <input type="button" onclick="document.getElementById('file1').click();
            return false;" value="Upload File" class="btn btn-primary">
    <span id="filename" class="label label-success"></span>
    <input type="file" id="file1" name="file1" style="visibility: hidden" onchange="filenameprint()">
    <input type="button" onclick="uploadFile()" value="Upload File">
    <script>
        function filenameprint() {
            var file1 = document.getElementById('file1').value;
            if (!empty(file1)) {
                document.getElementById('filename').innerHTML = file1;
            } else {
                document.getElementById('filename').innerHTML = "No File Chosen"

            }

        }
    </script>
    <progress value="0" max="100"></progress>
</form>

Answer 1

我认为您发送了错误的formData。您应该只发送文件。

var fileInput = $('#file1');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);