通过ajax上传图片时如何发送文件信息

Question

我正在尝试拆分上传到 ajax 方法的图像文件。所有的 html 和 JS 都在一个文件中，然后我制作了一个 PHP 文件，其中包含所有 PHP。

我正在苦苦挣扎的是我不确定如何将图像文件信息发送到 php 文件，然后让 php 的其余部分像以前一样工作。

截至目前，这行代码$p_img = $_POST['file']; 出现未定义索引错误。但是，即使正在填充，我也不确定这是否能正确处理被分隔的文件。

我是否可以将我的第一个 PHP 函数 UploadFile 留在带有 HTML 和 JS 的文件中，然后将函数发送到 PHP 文件？

如果不行，我该怎么办？

HTML

<form action="" method="POST" id="projectForm" enctype="multipart/form-data">
    <label>Project Name</label>
    <input type="text" class="input block" name="p_name">
    <label>Project Img</label>
    <input type="file" id="file" name="file" class="file-input block">
    <button id="submit">Submit Project</button>
</form>

JS

$('#projectForm').validate({
        ignore: [],
        rules: {
            p_name: {
                required: true,
                minlength: 5
            },
            p_alt: {
                required: true,
                minlength: 2
            }
        },
        messages: {
            p_name: {
                required: "Please enter the project name",
                minlength: "The project name is too short"
            },
            p_alt: {
                required: "Please enter the alt text",
                minlength: "Your alt text is too short"
            }
        },
        submitHandler: function (form, e) {
            e.preventDefault();
            var formData = new FormData(form);
            category = $(this).data('category');

            console.log(category);

            $.ajax({
                url: '/php/projectSend.php',
                type: 'POST',
                data: formData,
                success: function (data) {
                  console.log(data);
                },
                contentType: false,
                processData: false,
                error: function (xhr, textStatus, errorThrown) {
                    alert(textStatus + " | " + errorThrown);
                    alert('There are currently no project images for this selection');
                }
            });
        }
    });

PHP

ini_set('display_errors', 1);
error_reporting(E_ALL);
include($_SERVER['DOCUMENT_ROOT'].'/config.php');

$p_name = trim(htmlspecialchars($_POST['p_name'], ENT_QUOTES));
$p_img = $_POST['file'];
$p_alt = trim(htmlspecialchars($_POST['p_alt']));
$category = trim(htmlspecialchars($_POST['categoryName']));
$creator = trim(htmlspecialchars($_POST['creatorName']));
$status = $_POST['status'];

    function UploadFile($fileArray = array(), $destinationFolder = '../project_images/') {
        $filename       =   $fileArray['file']['name'];
        $tmp_name       =   $fileArray['file']['tmp_name'];
        $filesize       =   $fileArray['file']['size'];
        $file_error     =   $fileArray['file']['error'];
        $file           =   $fileArray['file'];
        // Save all the default data.
        $return['error']        =   true;
        $return['success']      =   false;
        $return['file']['dest'] =   $destinationFolder.$filename;
        $return['file']['size'] =   $filesize;

        if($file_error == 0)
            $return['error']    =   false;
        if(!is_dir($destinationFolder))
            mkdir($destinationFolder,0755,true);
        // If your filename is not empty, return success or fail of upload
        if (!empty($filename))
            $return['success']  = (move_uploaded_file($tmp_name, $destinationFolder.$filename));

        return $return;
    }

try {
    $con = getConfig('pdo');
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    function SaveToDb($con,$filename = false) {
        // Return fail immediately if the connection is false or image is invalid
        if(empty($filename) || !$con)
            return false;
        $project_sql = "
            INSERT INTO quotes
            (p_name, p_img, p_alt, category, creator, status, date_added)
            VALUES(?, ?, ?, ?, ?, ?, NOW())
        ";
        if ($project_stmt = $con->prepare($project_sql)) {
            $project_stmt->execute(array($p_name, $p_img, $p_alt, $category, $creator, $status));
            return true;
            $proj_succ = "Success";
            echo json_encode($proj_succ);
        }
        return false;
    }
} catch (PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}

    if(isset($_POST['create'])) {
        // Try uploading
        $upload =   UploadFile($_FILES);
        // If upload fails
        if(!$upload['success']) {
            echo '<h3>Sorry, an error occurred</h3>';
        }
        else {

            // Try to save it
            $saveToDb   =   SaveToDb($con,$upload['file']['dest']);
            // Get the profile from image name
            $profPic    =   ($saveToDb)? getPhoto($con,$upload['file']['dest']) : false;   
        }
    }

Answer 1

我认为您发送给 FormData 的表单对象不是 FormData 所期望的。

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function() {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);
}

you can read more

Answer 2

那是因为您试图通过不包含文件的$_POST 数组访问上传的文件。你要找的是$_FILES。

Reference