无提交按钮实现WYSIWYG编辑器图片上传，PHP检测不到文件求助

以下是针对该问题的实用排查步骤和解决方案：

1. 确保FormData正确获取文件 #

先在JS的change事件里添加文件选择校验，避免空文件上传导致的异常：

$('input:file').change( function() {
    const fileInput = document.getElementById("img");
    // 校验用户是否选择了文件
    if (!fileInput.files || fileInput.files.length === 0) {
        console.log("请选择图片文件");
        return;
    }
    var fd = new FormData();
    fd.append("img", fileInput.files[0]);
    fd.append("submit", true);
    
    // 后续AJAX代码保持不变
});

2. 检查PHP上传配置 #

PHP的php.ini配置可能限制文件上传，需确认以下参数：

• upload_max_filesize：值需大于你设置的500KB（建议设为1M）
• post_max_size：该值必须大于upload_max_filesize（建议设为2M）
• file_uploads：确保设置为On

可在PHP脚本中临时输出当前配置进行验证：

echo json_encode([
    'upload_max_filesize' => ini_get('upload_max_filesize'),
    'post_max_size' => ini_get('post_max_size'),
    'file_uploads' => ini_get('file_uploads')
]);
exit;

3. 确保目标目录存在且权限正确 #

你的PHP代码直接使用用户目录作为上传路径，但如果目录不存在，会导致后续流程异常，需先创建目录并设置权限：

if(isset($_FILES["img"])) {
    $username = strtolower($_SESSION['username']);
    $username = str_replace(' ', '-', $username);
    $target_dir = $username."/";
    
    // 递归创建目录，确保目录存在
    if (!is_dir($target_dir)) {
        mkdir($target_dir, 0755, true);
    }
    
    // 后续代码保持不变
}

同时要确保Web服务器进程（如www-data）对该目录拥有读写权限。

4. 用浏览器开发者工具验证请求完整性 #

打开浏览器开发者工具的Network标签，查看上传请求：

• 检查Form Data区域，确认img字段存在且包含文件信息
• 确认请求的Content-Type为multipart/form-data; boundary=...（由FormData自动生成，不要手动设置）
• 查看响应内容，可临时开启PHP错误提示排查：

error_reporting(E_ALL);
ini_set('display_errors', 1);

5. 打印后端接收的数据缩小范围 #

在PHP开头添加调试代码，直接查看后端是否接收到文件：

session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 打印所有接收的数据
var_dump($_FILES);
var_dump($_POST);

$response = ["success"=>false, "message"=>"Bad request"];
// 后续代码保持不变

6. 用简化代码测试基础功能 #

先剥离复杂逻辑，写最简测试脚本验证上传流程：

测试HTML #

<input type="file" name="img" id="img" accept="image/jpg, image/jpeg, image/png, image/gif">
<button id="testBtn">测试上传</button>

测试JS #

$('#testBtn').click(function() {
    const fileInput = document.getElementById("img");
    if (!fileInput.files || fileInput.files.length === 0) {
        alert("请选择文件");
        return;
    }
    const fd = new FormData();
    fd.append("img", fileInput.files[0]);
    $.ajax({
        url: 'uploads/upload_img.php',
        data: fd,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data) {
            console.log(data);
        }
    });
});

测试PHP #

<?php
var_dump($_FILES);
?>

若最简版本仍无法接收文件，问题大概率出在服务器配置或请求发送环节；若可以接收，再逐步恢复原有逻辑排查。

内容的提问来源于stack exchange，提问作者WIverson97