Question

我想通过ASP.NET MVC中的Ajax上传有关列表模型对象的多个图像。我想将模型对象的列表从ajax发送到控制器，并且此列表对象包含数据和图像。这是我的控制器代码：-

   public ActionResult Index(List<KYCModel> KYCModel)
    {
        return Json("Test");
    }

我的模特：-

public class KYCModel
{
    public string AppNo { get; set; }
    public string PhotoType { get; set; }
    public HttpPostedFileBase KYCImage { get; set; }
}

我的Ajax呼叫：-

 function CallImageUploadAjax() {           
        var arr = [];
        var typearr = new Array();
        var types = "@types";
        typearr = types.split(",");
        var KYCModel = new FormData($('#KYCForm').get(0));
        for (var i = 0; i < typearr.length; i++) {
            KYCModel.append("KYCImage", $('#KYCImage_' + typearr[0])[0].files[0]);
            KYCModel.append("PhotoType", $('#PhotoType_' + typearr[0]).val());
            KYCModel.append("AppNo", $('#AppNo_' + typearr[0]).val());
            arr.push(KYCModel);
        }
        KYCModel = JSON.stringify({ 'KYCModel': arr });
        $.ajax({
            contentType: false,
            processData: false,
            dataType: 'json',
            type: "POST",
            url: '../Home/Index',
            data: KYCModel,               
            success: function (data) {


            },
            error: function () {

                alert("An error occured");
            }
        });

    }

查看页面：-

<body>
@using (Html.BeginForm(null, null, new { @id = string.Empty }, FormMethod.Post, new { @id = "KYCForm", @enctype = "multipart/form-data" }))
{
    <br />
    <br />
    <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 80%; background-color: WHITE;" align="center">
        @foreach (string type in PhotoTypes)
        {
            AppNoId = "AppNo_" + type;
            PhotoTypeId = "PhotoType_" + type;
            KYCImageId = "KYCImage_" + type;
            <tr>
                <td class="headlabel">
                    <label>Appno </label>
                </td>
                <td class="contentlabel">
                    @Html.TextBoxFor(m => m.AppNo, new { @id = AppNoId })
                </td>
                <td class="headlabel">
                    <label>PhotoType </label>
                </td>
                <td class="contentlabel">
                    @Html.TextBoxFor(m => m.PhotoType, new { @id = PhotoTypeId })
                </td>
                <td class="headlabel">
                    <label>KYCImage </label>
                </td>
                <td class="contentlabel">
                    <input id="@KYCImageId" type="file" />
                </td>
            </tr>              
        }
        <tr>
            <td>
                <input type="button" class="cssbutton blue" value="Submit" onclick="CallImageUploadAjax()" />
            </td>
        </tr>
    </table>
}

请帮助我如何解决此问题。提前致谢。问候

在ASP.NET MVC中通过Ajax使用模型类对象上传多个图像

0 个答案: