javascript - 图像未使用 PHP 脚本保存

Question

我有一个非常简单的 HTML 页面，其中包含如下图片上传表单:

<form id="file_data">
    <input type='file' id='image_uploaded' accept='image'/>
    <input type='submit' id="upload_image"/>
</form>

我的Javascript:

$(document).ready(function() {
    $("form[id='file_data']").submit(function() {
        var form_data = new FormData(this);

        $.ajax({
            url: "upload.php",
            type: "POST",
            data: form_data,
            processData: false,
            success: function(data) {
                alert(data);
            }
        });
    });
});

upload.php 正在创建一个用于存储图像的目录(如果该目录尚不存在)。然后应该将图像存储在目录中:

<?php
    define("IMAGE_DIRECTORY", "images");

    //If the directory for images does not exist, create it
    if(!is_dir(IMAGE_DIRECTORY)) {
        mkdir(IMAGE_DIRECTORY, 0777, true);
    }

    move_uploaded_file($_FILES["tmp_name"], IMAGE_DIRECTORY . "\\" .basename($_FILES["file"]["name"]));
?>

虽然 PHP 脚本会创建目录，但如果目录不存在，则不会将任何图像保存到目录中。我假设我没有从 PHP 正确访问图像，但我看过的教程没有解释太多关于在 Ajax 调用中发送图像到 PHP 时实际发生的细节。

Answer 1

你在代码中遗漏的问题:

HTML:enctype="multipart/form-data"在 form上传文件，还有<input type="file"缺少 name="file"

PHP:move_uploaded_file不正确你错过了['file']对于 tmp_name $_FILES['file']["tmp_name"]

Ajax:dataType:"html"丢失，以便您的 ajax 从服务器获取作为字符串的响应

像这样更新您的 Html、Php 和 Ajax 代码:

HTML 代码:

<form id="file_data" enctype="multipart/form-data" method="post">
    <input type='file' name='file' id='image_uploaded' accept='image'/>
    <input type='submit' id="upload_image"/>
</form>

PHP代码:

<?php
    define("IMAGE_DIRECTORY", "images");

    //If the directory for images does not exist, create it
    if(!is_dir(IMAGE_DIRECTORY)) {
        mkdir(IMAGE_DIRECTORY, 0777, true);
    }

    move_uploaded_file($_FILES['file']["tmp_name"], IMAGE_DIRECTORY . "\\" .basename($_FILES["file"]["name"]));
?>

Ajax 代码:

$.ajax({ 
    url: "upload.php", 
    data : form_data, 
    type : "POST", 
    async: false, 
    cache: false, 
    contentType: false, 
    processData: false, 
    dateType : "html", 
    success: function(data) { 
        alert(data); 
    } 
});