如何用Ajax实现多文件上传？排查仅发送最后一个文件问题

核心问题 #

1. jQuery端未遍历所有选中文件：当前代码仅向FormData中添加了第一个选中的文件（files[0]），没有处理所有选中的文件，导致后端只能收到单个文件。
2. PHP端缺少基础校验：未判断文件上传是否成功，也未处理文件名重名等潜在问题，容易引发异常。

修正后的代码 #

jQuery部分 #

遍历所有选中文件，逐个添加到FormData中：

$('#sss').change(function (){
    var fd = new FormData();
    // 遍历所有选中的文件，逐个加入FormData
    $.each($(this)[0].files, function(index, file) {
        fd.append('file[]', file);
    });
    $.ajax({
        url: 'input.php',
        data: fd,
        processData: false,
        contentType: false,
        type: 'POST',
        success:function(res){
            console.log(res)
            $('.bloj').html(res)
        }
    })
})

PHP部分 #

添加上传校验与异常处理，优化文件存储逻辑：

if(isset($_FILES['file']) && $_FILES['file']['error'][0] === UPLOAD_ERR_OK) {
    $cc = '';
    $uploadDir = 'image/';
    // 确保上传目录存在，不存在则创建
    if(!is_dir($uploadDir)) {
        mkdir($uploadDir, 0755, true);
    }
    // 遍历所有上传文件
    foreach($_FILES['file']['name'] as $index => $fileName) {
        $tmpName = $_FILES['file']['tmp_name'][$index];
        $error = $_FILES['file']['error'][$index];
        // 跳过上传失败的文件
        if($error !== UPLOAD_ERR_OK) {
            $cc .= '文件 ' . $fileName . ' 上传出错<br>';
            continue;
        }
        // 处理文件名重名问题，用时间戳拼接原文件名
        $safeFileName = time() . '_' . $fileName;
        $location = $uploadDir . $safeFileName;
        if(move_uploaded_file($tmpName, $location)) {
            $cc .= $location . '<br>';
        } else {
            $cc .= '文件 ' . $fileName . ' 保存失败<br>';
        }
    }
    echo $cc;
} else {
    echo '未选择有效文件或上传初始化失败';
}

HTML部分（无需修改） #

<input type="file" name="files[]" id="sss" multiple>
<div class="bloj"></div>

说明 #

• jQuery端通过$.each遍历文件集合，保证所有选中文件都被提交到后端。
• PHP端增加了目录检查、错误判断和文件名去重，避免因环境问题或重复文件名导致的上传失败。

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