Ajax 调用不选择 asp 点网形式的图像？

Question

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

我有一个供用户上传文件的输入 image/file。使用我现有的代码，添加图像时我会在控制器上收到 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);
                }
            });
        });

Answer 1

I have read I should set contentType: false but if I do this controller receives all values as null

是的，如果您发布的数据包含file.The，您需要设置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);
}

结果：

Ajax 调用不选择 asp 点网形式的图像？

Ajax call does not pick image in the asp dot net form?

ajax

jquery

asp.net-ajax

asp.net-core