Ajax 调用不选择asp dot net 形式的图像？答案

【问题标题】：Ajax call does not pick image in the asp dot net form?Ajax 调用不选择asp dot net 形式的图像？
【发布时间】：2021-04-11 07:33:01
【问题描述】：

我正在开发一个 asp.net 核心应用程序。我想向控制器发送一个 ajax 请求。我的 ajax 函数如下所示：

我有一个输入供用户上传文件图像/文件。使用我拥有的当前代码，我在添加图像时会在控制器处收到null。

Ajax 请求：（我有）

 $("#submit").click(function (e) {
            e.preventDefault();
            var data = $("#form1").serialize();
            console.log(data);
            alert(data);
            $.ajax({
                type: "post",
                url: "/Employee/Create",

                processData: false,
                data: data,
                success: function (response) {
                   alert(response);
                }
            });
        });

表格

<form  id="form1" enctype="multipart/form-data">
               <div>
            //Other fields
               </div>

  <input class="form-control-file custom-file-input" type="file" asp-for="@Model.ProfileImage">
    <button class="btn submitbtn" type="button">Choose file</button>

 </form>

我已阅读我应该设置 contentType: false 但如果我这样做，此控制器将接收所有值作为 null

如果我这样做，我会得到：data is not defined

 $("#submit").click(function (e) {
            e.preventDefault();
            var formData = new FormData();
 
            $.ajax({
                type: "post",
                url: "/Employee/Create",
                processData: false,
                data: formData,
                success: function (response) {
                   alert(response);
                }
            });
        });

【问题讨论】：

标签： jquery ajax asp.net-core asp.net-ajax

【解决方案1】：

我已阅读我应该设置 contentType: false 但如果我这样做，此控制器会将所有值接收为 null

是的，如果您发布的数据包含文件，您需要设置contentType: false。jQuery serialize() 方法将不包含输入文件元素。所以选择的文件用户不会包含在序列化值中。

您需要创建一个FormData 对象，将文件附加到该对象，然后将表单字段值也附加到同一个 FormData 对象。您可以简单地遍历所有输入字段并添加它。

这是一个工作演示：

型号：

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Role { get; set; }
    [NotMapped]
    public IFormFile ProfileImage { get; set; }
}

查看：

@model Employee
<form id="form1" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Role" class="control-label"></label>
        <input asp-for="Role" class="form-control" />
        <span asp-validation-for="Role" class="text-danger"></span>
    </div>

    <input type="file" asp-for="@Model.ProfileImage"/>

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

视图中的 JS：

@section scripts
{
<script>
    $("#submit").click(function (e) {
        e.preventDefault();
        var fdata = new FormData();

        var fileInput = $('#ProfileImage')[0];
        var file = fileInput.files[0];
        fdata.append("ProfileImage", file);

        $("form input[type='text']").each(function (x, y) {
            fdata.append($(y).attr("name"), $(y).val());
        });
   
        $.ajax({
            type: "post",
            url: "/Employee/Create",
            contentType: false,   //add this...
            processData: false,
            data: fdata,
            success: function (response) {
                alert(response);
            }
        });
    });
   
</script>
}

控制器：

[HttpPost]
//[ValidateAntiForgeryToken]
public JsonResult Create(Employee employee)
{
    return Json(employee);
}

结果：

【讨论】：