如何通过Bootstrap Modal将用户选中的图片上传到Controller方法

问题核心原因 #

• 浏览器出于安全限制，$('#i_image').val()只能获取到伪装的C:\fakepath\xxx路径，无法拿到实际的文件二进制内容
• application/json格式不支持传输二进制文件，你之前的提交方式本身就无法传递文件
• 参数名不匹配也会导致控制器无法正确绑定接收到的文件

解决步骤 #

1. 修改前端提交脚本，使用FormData对象包装所有表单数据（含文件和防伪令牌）：

$(document).ready(function () {
    $('#btn_submit').click(function (e) {
        e.preventDefault();
        // 直接基于现有表单生成FormData，自动包含所有表单字段、防伪令牌、选中的文件
        var formData = new FormData($('#form_firm_data')[0]);
        // 有额外自定义参数可手动追加：formData.append('参数名', '参数值')

        $.ajax({
            type: "POST",
            url: "/FirmModels/Create",
            data: formData,
            processData: false, // 禁止jQuery处理FormData
            contentType: false, // 禁止jQuery设置请求头，浏览器会自动生成带分隔符的multipart/form-data请求头
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    console.log(response.responseText);
                }
            },
            error: function (response) {
                alert("failed...");
            }
        })
        return false;
    })
})

2. 匹配参数绑定规则，二选一即可：

• 把文件输入框的name属性修改为和控制器接收参数名一致：

  <input type="file" class="form-control" id="i_image" required name="n_image" accept="image/*">
  

• 或者手动把文件追加到FormData中，不需要修改input的name：

  // 生成FormData后加一行即可
  formData.append('n_image', $('#i_image')[0].files[0]);
  

补充说明 #

如果你的CompanyModel模型中已经定义了HttpPostedFileBase类型的属性，直接把文件输入框的name设置为对应属性名即可，控制器方法不需要额外加n_image参数，ASP.NET MVC会自动把文件绑定到模型对应的属性上。

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