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

问题

I am working on an asp.net core application. I want to send an ajax request to the controller. My ajax function looks like this:

I have an input for the user to upload a file image/file. With the current code that I have, I receive null at the controller when adds an image.

Ajax request: (I Have)

 $("#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

<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>

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

If i do this, i get : 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);
                }
            });
        });

   

回答1:

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

Yes,you need set contentType: false if your posted data contain file.The jQuery serialize() method will not include input file elements. So file user selected is not going to be included in the serialized value.

You need create a FormData object, append the files to that then append the form field values as well to this same FormData object. You may simply loop through all the input field and add it.

Here is a working demo:

Model:

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

View:

@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 in View:

@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>
}

Controller:

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

Result:

来源：https://stackoverflow.com/questions/65580779/ajax-call-does-not-pick-image-in-the-asp-dot-net-form