如何使用PHP Ajax实现单表单多独立输入框的多图片新增与更新

1 调整前端表单结构 #

给表单加唯一标识，给文件输入框加图片格式限制，更新场景可新增隐藏域存储原有图片路径：

<form id="imgUploadForm">
    <input type="file" name="img1" accept="image/*">
    <input type="file" name="img2" accept="image/*">
    <input type="file" name="img3" accept="image/*">
    <!-- 仅更新场景需要以下隐藏域，新增场景可删除 -->
    <input type="hidden" name="old_img1" value="原有img1的存储路径">
    <input type="hidden" name="old_img2" value="原有img2的存储路径">
    <input type="hidden" name="old_img3" value="原有img3的存储路径">
    <input type="submit" value="Save">
</form>

2 编写Ajax提交逻辑 #

用FormData承载所有表单数据，不要手动设置请求头的Content-Type，让浏览器自动生成带边界标识的请求头：

document.querySelector('#imgUploadForm').addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    const formData = new FormData(this);

    fetch('upload_handle.php', {
        method: 'POST',
        body: formData
    }).then(res => res.json())
    .then(data => {
        if(data.code === 200) {
            alert('保存成功');
            // 可自行新增页面预览图更新逻辑
        } else {
            alert('操作失败：' + data.msg);
        }
    }).catch(err => {
        console.error('请求异常：', err);
    })
})

3 编写PHP后端处理逻辑（upload_handle.php） #

逐字段处理文件上传，更新场景下如果用户未上传新文件则保留原有路径，避免旧数据丢失：

<?php
// 基础配置
$uploadDir = './uploads/'; // 图片存储目录，需提前创建并授予读写权限
$allowExt = ['jpg', 'jpeg', 'png', 'gif']; // 允许的图片格式
$maxSize = 2 * 1024 * 1024; // 单图最大限制2M
$res = ['code' => 400, 'msg' => ''];
$saveData = [];

// 循环处理3个图片字段
for ($i = 1; $i <= 3; $i++) {
    $fieldName = 'img' . $i;
    $oldFieldName = 'old_img' . $i;
    // 无新文件上传时保留原有路径
    if (empty($_FILES[$fieldName]['tmp_name'])) {
        $saveData[$fieldName] = $_POST[$oldFieldName] ?? '';
        continue;
    }
    // 校验文件上传状态
    $file = $_FILES[$fieldName];
    if ($file['error'] !== 0) {
        $res['msg'] = $fieldName . '上传出错';
        echo json_encode($res);
        exit;
    }
    // 校验文件格式
    $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
    if (!in_array($ext, $allowExt)) {
        $res['msg'] = $fieldName . '格式不支持，仅允许jpg/png/gif';
        echo json_encode($res);
        exit;
    }
    // 校验文件大小
    if ($file['size'] > $maxSize) {
        $res['msg'] = $fieldName . '大小不能超过2M';
        echo json_encode($res);
        exit;
    }
    // 生成唯一文件名避免覆盖
    $fileName = uniqid('img_') . '.' . $ext;
    $savePath = $uploadDir . $fileName;
    // 移动文件到存储目录
    if (!move_uploaded_file($file['tmp_name'], $savePath)) {
        $res['msg'] = $fieldName . '保存失败，请检查目录权限';
        echo json_encode($res);
        exit;
    }
    $saveData[$fieldName] = $savePath;
    // 更新场景可删除旧图片，避免存储冗余
    if (!empty($_POST[$oldFieldName]) && file_exists($_POST[$oldFieldName])) {
        unlink($_POST[$oldFieldName]);
    }
}

// 此处可自行编写数据库写入/更新逻辑，把$saveData存入对应数据表即可

$res['code'] = 200;
$res['msg'] = '操作成功';
$res['data'] = $saveData;
echo json_encode($res);
?>

注意事项 #

• 生产环境建议新增文件真实类型校验，可通过getimagesize()判断是否为真实图片，避免恶意文件上传
• 若需要支持大文件上传，可自行扩展切片上传逻辑
• 存储目录建议做静态资源分离，避免被执行恶意脚本

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