jQuery-将文件名附加到FormData并在PHP脚本中获取它

Question

我有以下JS代码，用于根据其路径上传图像：

var data = new FormData();
data.append('fileName', fileName);
data.append('file', file);
$.ajax({
    url : dbPath + "upload-file.php",
    type: 'POST',
    data: data,
    contentType: false,
    processData: false,
    mimeType: "multipart/form-data",
    success: function(data) {
       Swal.close();

       var fileURL = dbPath + data;
       console.log('FILE UPLOADED TO: ' + fileURL);

这是我的upload-image.php脚本：

<?php

$fileName = $_POST['fileName'];

if ($_FILES["file"]["error"] > 0) {
    echo "Error: " .$_FILES["file"]["error"]. "<br>";

} else {
    // Check file size
    if ($_FILES["file"]["size"] > 20485760) { // 20 MB
        echo "Sorry, your file is larger than 20 MB. Upload a smaller one.";    
    } else { uploadImage(); }

}// ./ If


// UPLOAD IMAGE ------------------------------------------
function uploadImage() {
    // generate a unique random string
    $randomStr = generateRandomString();
    $filePath = "uploads/".$randomStr."".$fileName;

    // upload image into the 'uploads' folder
    move_uploaded_file($_FILES['file']['tmp_name'], $filePath);

    // echo the link of the uploaded image
    echo $filePath;
}

// GENERATE A RANDOM STRING ---------------------------------------
function generateRandomString() {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i<20; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString;
}
?>

[上传文件，例如JPG图像，一切正常，但我的目的是使用：

data.append('fileName', fileName);

简单地将文件名和扩展名附加到我的FormData上，并获得如下所示的文件URL：

https://example.com/_json/uploads/03aC8qsIk4hanngqO3G4_fileName.jpg

但是我的PHP脚本中的$ fileName变量会以Undefined index fileName in line xx的形式触发error_log行，是否有办法上传文件，获取文件名和扩展名并将其附加到我的PHP脚本生成的文件URL上？

我希望我的问题很清楚，我想要做的只是对所有类型的文件（不仅仅是图像）进行常规的Ajax自动上载，并根据随机字符串及其名称和扩展名（例如）获取其URL。 png，.mp4，.pdf等）。

Answer 1

我已经弄清楚了，由于所有注释，我不得不将fileName附加到我的FormData()并按如下所示编辑我的PHP脚本：

JS：

function uploadFile() {
var dbPath = '<?php echo $DATABASE_PATH ?>';
    var file = $("#file")[0].files[0];
    var fileName = file.name;
    console.log('FILE NAME: ' + fileName);

    Swal.fire({icon: 'success', title: 'Loading...', showConfirmButton: false })

    var data = new FormData();
    data.append('file', file);
    data.append('fileName', fileName); <!-- ADDED THIS LINE

    $.ajax({
        url : dbPath + "upload-file.php?fileName=" + fileName, <!-- ADDED THIS LINE
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        mimeType: "multipart/form-data", <!-- ADDED THIS LINE
        success: function(data) {
            Swal.close();

            var fileURL = dbPath + data;
            console.log('FILE UPLOADED TO: ' + fileURL);
            // error
            if (data.includes("ERROR:")) {
                Swal.fire({ icon: 'error', title: 'Oops...', text: data, });
            // show file data
            } else {
                $("#fileURL").val(fileURL);
                $("#viewButton").attr("href", fileURL);
                $("#viewButton").css("display", "block");
            }
        // error
        }, error: function(e) {  
            Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong: ' + e.message, });
    }});
}

我的upload-file.php脚本：

<?php include 'config.php';

if ($_FILES["file"]["error"] > 0) {
    echo "Error: " .$_FILES["file"]["error"]. "<br>";

} else {
    // Check file size
    if ($_FILES["file"]["size"] > 20485760) { // 20 MB
        echo "ERROR: Your file is larger than 20 MB. Please upload a smaller one.";    
    } else { uploadImage(); }

}// ./ If


// UPLOAD IMAGE ------------------------------------------
function uploadImage() {
    // generate a unique random string
    $randomStr = generateRandomString();
    $filePath = "uploads/".$randomStr;

    // upload image into the 'uploads' folder
    move_uploaded_file($_FILES['file']['tmp_name'], $filePath);

    // echo the link of the uploaded image
    echo $filePath;
}

// GENERATE A RANDOM STRING ---------------------------------------
function generateRandomString() {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i<20; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString."_".$_POST['fileName']; <!-- ADDED THIS LINE
}
?>

现在，我终于可以上传任何类型的文件，并在URL的末尾获得其名称和扩展名，它可以正常工作。