为何PHP脚本中HTML表单的图片会被重复上传？

可能的原因及对应修复方案 #

1. 表单提交事件重复绑定

如果你的JS代码被执行了多次（比如放在动态加载内容里、重复引入JS文件），会导致submit事件被绑定多份，一次表单提交会触发多轮AJAX请求，最终每张图片被上传多次。

修复代码：
先解绑原有事件再绑定，避免重复触发：

$("#product_form").off('submit').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: 'assets/php/process.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: new FormData(this),
        success: function(response) {
            console.log(response);
        }
    });
});

2. 用户重复点击提交按钮

如果用户在请求完成前多次点击提交按钮，也会导致重复上传。可以在请求期间禁用提交按钮：

$("#product_form").submit(function(e) {
    e.preventDefault();
    // 获取提交按钮并禁用
    const submitBtn = $(this).find('button[type="submit"]');
    submitBtn.prop('disabled', true);
    
    $.ajax({
        url: 'assets/php/process.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: new FormData(this),
        success: function(response) {
            console.log(response);
        },
        // 请求完成（无论成功失败）恢复按钮
        complete: function() {
            submitBtn.prop('disabled', false);
        }
    });
});

3. PHP代码未过滤无效上传项

有时候会存在空的上传记录（比如用户未选中文件时的空项），或者重复的临时文件路径，需要在PHP中增加校验：

$file_array = $_FILES['image'];
$file_count = count($file_array['name']);

// 循环处理上传文件
for($i=0;$i<$file_count;$i++){
    $file_name = $file_array['name'][$i];
    $file_tmp = $file_array['tmp_name'][$i];
    $file_type = $file_array['type'][$i];

    // 跳过无效的上传项（临时文件不存在或不是通过HTTP POST上传的）
    if(empty($file_tmp) || !is_uploaded_file($file_tmp)){
        continue;
    }

    // 获取文件扩展名
    $file_ext = pathinfo($file_name, PATHINFO_EXTENSION);

    // 生成唯一文件名
    $new_file_name = uniqid().'.'.$file_ext;

    // 移动文件并判断是否成功
    if(move_uploaded_file($file_tmp, 'uploads/'.$new_file_name)){
        echo "文件 ".$file_name." 已重命名为 ".$new_file_name." 并上传至服务器。<br>";
    } else {
        echo "文件 ".$file_name." 上传失败。<br>";
    }
}

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