Ajax调用不以asp点网形式选择图像吗? [英] Ajax call does not pick image in the asp dot net form?

问题描述

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

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:

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

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请求:(我有)

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

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);
                }
            });
        });

   

推荐答案

我已阅读，应将contentType设置为false，但如果执行此操作，则该控制器会将所有值接收为null

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

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

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.

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

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:

型号:

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点网形式选择图像吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！