如何通过AJAX将含文件的表单数据提交至后端？

嘿，我来帮你搞定这个文件上传的问题！你遇到的核心问题是发送包含文件的表单不能用普通的JSON对象，必须用FormData来封装所有数据——包括文件和普通表单字段。我看你之前试过FormData但没成功，大概率是用法不对，下面给你一步步修正：

修正后的完整JS代码 #

$('.submit').click(function (e) {
    e.preventDefault();
    var id = $(this).attr('id');
    
    // 1. 创建FormData对象，这是上传文件的核心
    var formData = new FormData();
    
    // 2. 添加CSRF令牌，确保请求通过Laravel的CSRF验证
    formData.append('_token', "{{ csrf_token() }}");
    
    // 3. 逐个添加普通表单字段
    formData.append('name', $("input[name=name]").val());
    formData.append('company_size', $("input[name=company_size]").val());
    formData.append('website', $("input[name=website]").val());
    formData.append('slogan', $('input[name=slogan]').val());
    formData.append('message_title', $('input[name=message_title]').val());
    formData.append('message_content', $('#company_message_content').val());
    formData.append('about_us', $('#about_us').val());
    formData.append('why_us', $('#why_us').val()); // 注意：你表单里这个textarea的ID之前写错成了about_us，必须修正！
    formData.append('recruiting_steps', $('#recruiting_steps').val());
    formData.append('address', $('#address').val());
    formData.append('email', $('#email').val());
    formData.append('phone_number', $('#phone_number').val());
    formData.append('location', $('#location').val()); // 注意：你表单里这个字段的name写成了phone_number，必须修正！
    
    // 4. 添加文件字段：获取选中的文件对象
    var logoFile = $('#company_logo')[0].files[0];
    var mainPhotoFile = $('#main_photo')[0].files[0];
    if (logoFile) formData.append('logo', logoFile);
    if (mainPhotoFile) formData.append('main_photo', mainPhotoFile);
    
    var url = '/companies/' + id;
    $.ajax({
        type: 'PATCH',
        url: url,
        processData: false, // 禁止jQuery处理FormData，保持其原始格式
        contentType: false, // 让浏览器自动设置正确的Content-Type（multipart/form-data）
        data: formData,
        success: function (mydata) {
            $('#section1').fadeOut().html(mydata).fadeIn();
        },
        error: function (t) {
            console.log('请求失败详情:', t);
        }
    });
});

关键要点说明 #

1. FormData的正确使用方式：

   • 不能像普通JS对象那样直接赋值，必须用append()方法逐个添加所有字段，包括文件和普通文本数据。
   • 文件的获取逻辑是$('#fileInput')[0].files[0]，这能拿到文件输入框中选中的第一个文件对象。

2. AJAX配置的核心参数：

   • processData: false：阻止jQuery自动把FormData转换为查询字符串，保留其用于文件上传的原始结构。
   • contentType: false：让浏览器自动设置请求头的Content-Type为multipart/form-data（这是上传文件的必要格式），不要手动指定这个值。

3. 你表单里的隐藏错误（必须修正）：

   • 多个<lable>标签拼写错误，规范写法是<label>（虽然不影响功能，但会降低代码可维护性）。
   • why_us对应的textarea ID写错成了about_us，会导致JS无法正确获取该字段的值。
   • location字段的name属性写成了phone_number，后端会接收不到location的值，还会覆盖phone_number的数据。

后端接收示例（以Laravel为例） #

因为你用了{{csrf_field()}}，推测是Laravel项目，后端可以这样接收数据：

public function update(Request $request, $id)
{
    // 接收普通表单字段
    $companyData = $request->only([
        'name', 'company_size', 'website', 'slogan', 
        'message_title', 'message_content', 'about_us', 
        'why_us', 'recruiting_steps', 'address', 'email', 
        'phone_number', 'location'
    ]);
    
    // 处理文件上传
    if ($request->hasFile('logo')) {
        $logoPath = $request->file('logo')->store('company_logos');
        $companyData['logo'] = $logoPath;
    }
    
    if ($request->hasFile('main_photo')) {
        $mainPhotoPath = $request->file('main_photo')->store('company_main_photos');
        $companyData['main_photo'] = $mainPhotoPath;
    }
    
    // 更新公司数据
    $company = Company::findOrFail($id);
    $company->update($companyData);
    
    return response()->json(['status' => 'success', 'data' => $company]);
}

这样修改后，就能成功把文件和其他表单数据一起通过AJAX发送到后端啦！

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