ASP.NET MVC5中jQuery Mobile致HttpPostedFileBase模型绑定失败求助

现有基于jQuery-2.2.4 + jQuery-mobile-1.4.5的MVC项目，新增<input type='file'>元素后发现jQuery Mobile会干扰其与HttpPostedFileBase的模型绑定。注释掉jquery.mobile-1.4.5.min.js后模型绑定正常，但会破坏现有UI布局，无法短期内替换框架。

已尝试的操作：

• 升级jQuery到3.6.1，导致依赖jQuery 2.x的jQuery-mobile-1.4.5失效
• 升级到兼容jQuery 3.6.1的jQuery-mobile-1.5.0rc，仍无法解决文件字段提交为NULL的问题
• 尝试用data-role=none禁用控件的jQuery Mobile处理，但无效

现象：选择文件后input的value属性正常填充，但表单提交时该字段在Fiddler中显示为NULL，控制器接收值也为NULL。

模型代码 #

[Display(Name = "Certification Photo")]
public HttpPostedFileBase UploadedPhoto { get; set; }

Razor视图代码 #

@Html.TextBoxFor(r => r.Sitter.Certifications[i].UploadedPhoto,
    new {
        type = "file",
        data_certindex = i,
        accept = "image/gif,image/png,image/jpeg,image/jpg,image/bmp",
        style = "visibility: hidden; position:absolute;",
        @class = "form-control"
    }
)

原因 #

jQuery Mobile会自动增强表单元素，对于文件输入框，它会创建代理元素替代原生input，而这个代理元素在表单提交时无法正确传递原生文件输入的内容，导致模型绑定失败。即使升级到1.5.0rc，该问题仍存在于部分场景中。

解决办法 #

1. 彻底禁用jQuery Mobile对目标控件/表单的增强 #

data-role=none需配合data-enhance="false"才能完全生效，可尝试以下两种方式：

• 单个文件输入控件：在input元素上同时添加两个属性，阻止jQuery Mobile处理该控件：

  @Html.TextBoxFor(r => r.Sitter.Certifications[i].UploadedPhoto,
      new {
          type = "file",
          data_certindex = i,
          accept = "image/gif,image/png,image/jpeg,image/jpg,image/bmp",
          style = "visibility: hidden; position:absolute;",
          @class = "form-control",
          data_role = "none",
          data_enhance = "false"
      }
  )
  

• 整个表单：在form标签上添加data-enhance="false"，阻止jQuery Mobile增强整个表单，但会影响表单内其他jQuery Mobile样式控件，需权衡使用。

2. 手动拦截表单提交，构造FormData传递文件 #

如果禁用增强无效，可绕过jQuery Mobile的默认提交逻辑，手动处理文件传递：

$(document).on('submit', 'your-form-selector', function(e) {
    // 阻止jQuery Mobile默认提交行为
    e.preventDefault();
    e.stopPropagation();

    var form = $(this);
    var formData = new FormData(form[0]);

    // 确保获取真实的文件输入元素，追加到FormData
    var fileInput = form.find('input[type="file"][name="Sitter.Certifications[' + i + '].UploadedPhoto"]')[0];
    if (fileInput.files.length > 0) {
        formData.append('Sitter.Certifications[' + i + '].UploadedPhoto', fileInput.files[0]);
    }

    // 发起AJAX提交
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            // 处理成功逻辑
        },
        error: function(xhr) {
            // 处理错误逻辑
        }
    });
});

注意替换your-form-selector为实际表单选择器，确保文件字段name与模型绑定名称一致（Razor生成的name通常为Sitter.Certifications[i].UploadedPhoto）。

3. 全局跳过文件输入的jQuery Mobile增强 #

在引入jquery.mobile.min.js后添加以下代码，让jQuery Mobile直接保留原生文件输入控件的行为：

$(document).bind('mobileinit', function() {
    $.mobile.page.prototype.options.keepNative = "input[type='file']";
});

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