ajax调用不选择asp点网形式的图片？

问题描述

我正在开发一个 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",data: formData,success: function (response) {
                   alert(response);
                }
            });
        });

   

解决方法

我已经读过我应该设置 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);
}

结果：