如何用jQuery AJAX实现多文件分批上传（单次请求传单个文件）

没问题，我帮你调整代码，实现每个AJAX请求只传单个文件的需求。核心思路是获取所有选中的文件后，逐个遍历并创建独立的FormData对象发送请求，具体代码和解释如下：

完整jQuery代码实现 #

$('#submit-form').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    
    // 获取文件输入框里的所有选中文件
    const fileInput = $('#resume')[0];
    const files = fileInput.files;
    
    // 如果没有选中文件，直接返回
    if (files.length === 0) return;
    
    // 遍历每个文件，逐个发送AJAX请求
    Array.from(files).forEach((file, index) => {
        // 为每个文件创建独立的FormData
        const singleFileFormData = new FormData();
        // 注意保持name属性和原表单一致，后端才能正确接收
        singleFileFormData.append('resume[]', file, file.name);
        
        // 发送AJAX请求
        $.ajax({
            url: '你的上传接口地址', // 替换成实际的上传接口
            type: 'POST',
            data: singleFileFormData,
            processData: false, // 必须设置，jQuery不会处理FormData
            contentType: false, // 必须设置，让浏览器自动设置正确的Content-Type
            success: function(response) {
                console.log(`第${index+1}个文件上传成功`, response);
                // 这里可以添加单个文件上传成功后的逻辑，比如更新进度条
            },
            error: function(xhr, status, error) {
                console.error(`第${index+1}个文件上传失败`, error);
                // 单个文件上传失败的处理逻辑，比如提示用户
            }
        });
    });
    
    // 可选：所有文件都发起请求后的提示
    console.log('所有文件上传请求已发起');
});

关键细节说明 #

• FormData的独立创建：每个文件对应一个新的FormData对象，确保每个请求只包含单个文件。
• append参数：singleFileFormData.append('resume[]', file, file.name)里的resume[]要和原表单input的name属性保持一致，这样后端能按照原来的字段名接收文件。
• processData和contentType：这两个参数必须设为false，否则jQuery会自动处理FormData，导致文件上传失败。

进阶：顺序上传（上一个完成再传下一个） #

如果需要按顺序上传文件（避免同时发起多个请求给服务器造成压力），可以用递归的方式实现：

$('#submit-form').submit(function(e) {
    e.preventDefault();
    
    const fileInput = $('#resume')[0];
    const files = Array.from(fileInput.files);
    let currentIndex = 0;
    
    // 定义递归上传函数
    function uploadNextFile() {
        if (currentIndex >= files.length) {
            console.log('所有文件上传完成');
            return;
        }
        
        const file = files[currentIndex];
        const formData = new FormData();
        formData.append('resume[]', file, file.name);
        
        $.ajax({
            url: '你的上传接口地址',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log(`第${currentIndex+1}个文件上传成功`, response);
                currentIndex++;
                uploadNextFile(); // 上传成功后继续下一个
            },
            error: function(xhr, status, error) {
                console.error(`第${currentIndex+1}个文件上传失败`, error);
                // 可选：失败后是否继续上传下一个，这里默认继续
                currentIndex++;
                uploadNextFile();
            }
        });
    }
    
    // 启动第一个文件上传
    uploadNextFile();
});

这样就能根据你的需求，选择并行或顺序的方式实现单个文件的AJAX上传了。

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