如何在 iframe 中上传 Iform 文件（绑定为空）（javascript/jquery）

Posted 2023-03-31

【中文标题】如何在 iframe 中上传 Iform 文件（绑定为空）（javascript/jquery）

【英文标题】：How to upload Iform File in iframe ( was binding null) (javascript/jquery)

【发布时间】：2021-05-07 17:29:56

【问题描述】：

在 asp.net core 中，我定义 ProductUpdateRequest 具有 public IFormFile ThumbnailImage get; set; 。我在 iframe 中创建更新表单。当我提交表单时

jQuery(function ($) 
    $("#btnsubmit").click(function (e) 
        
        //Serialize the form datas.   
        var valdata = $("#updateProductForm").serialize();
        
        //to get alert popup   
        $.ajax(
            url: "/Products/Update",
            data: valdata,
            dataType: "json",
            type: "POST",
            success: function (response) 
                alert(1);
            
        );
    );   
    
);

asp.net 将表单中的数据绑定到请求模型：

[HttpPost]
        public async Task<IActionResult> Update([FromForm] ProductUpdateRequest request)

但 request.ThumbnailImage 为空。 如何通过 iframe 中的 ajax 将 img（Iform 文件）发布到服务器？ 更新操作完成后，如果我想得到响应，我会怎么做

success: function (response) 
                alert(1);
            

并告诉父页面重新加载以更新新数据？ 帮帮我，我无法理解这个问题...

【问题讨论】：

嗨@Thắng Nguyễn Quyết，请分享您的html代码。

【参考方案1】：

我使用的是 asp mvc，而不是核心。

public IFormFile ThumbnailImage get; set; 改为：

public HttpPostedFileBase ThumbnailImage get; set;  

在您的视图中将表单更改为此代码：

@using (Html.BeginForm("Update", "Home", FormMethod.Post, new  enctype = "multipart/form-data", onsubmit = "return SubmitForm(this)" ))

   
    <div class="form-group">
        <input name="ThumbnailImage" type="file" />
    </div>

    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>

并将脚本更改为此代码：

function SubmitForm(form) 
      var formData = new FormData($(form)[0]);
        $.ajax(
          url: form.action,
          type: form.method,
          data: formData,
          processData: false,
          contentType: false,

          success: function (response) 
             alert(response);
          
     );
     return false;

并在控制器中将您的操作更改为：

[HttpPost]
public async Task<JsonResult> Update(ProductUpdateRequest model)

    //update db
    return Json("success");

【讨论】：

ASP MVC 和 ASP Core MVC 差别太大了。

是有区别的，但是比如上面使用jQuery有什么区别呢？

你的Update方法全错了。 1) 几乎总是使用 ValueTask。 2）返回值中应该是IActionResult而不是JsonResult。其他 C# 片段的情况更糟。