javascript - AJAX 将带有数据和多个图像的表单发送到 asp.net mvc 操作

Question

已经两天了。我一直在网上搜索，但找不到解决方案。

我有一些输入字段，我可以在其中插入文本和选择图像。它们是可变的，这意味着如果您想要更多字段来添加更多产品，您可以单击“+”，然后我添加另一个字段集。

当我点击“Salva e Prosegui”并将所有数据传递到 Controller 中的 ASP.MVC 操作时。

我尝试了不同的方法，但无法传递图像。

HTML:

<div class="fields-container">
     <div class="row">
          <div class="col-md-2">
               <input type="text" name="nomecolore" placeholder="Nome Colore" class="form-control" />
         </div>
         <div class="col-md-1">
               <input type="text" name="codicecolore" placeholder="Codice Colore" class="form-control" />
         </div>
         <div class="col-md-4">
               <input type="file" name="filefronte" class="form-control filestyle" data-text="Foto Fronte" data-btnClass="btn-primary form-control" data-buttonBefore="true">
         </div>
         <div class="col-md-4">
               <input type="file" name="fileretro" class="form-control filestyle" data-text="Foto Retro" data-btnClass="btn-primary form-control" data-buttonBefore="true">
        </div>
        <div class="col-md-1">
              <button class="btn btn-success add-more form-control" type="button"><i class="glyphicon glyphicon-plus"></i></button>
         </div>
   </div>

JS:

$('#step-2-next').click(function () {
    var ListaNomiColori = $(".fields-container :input[name=nomecolore]");
    var ListaCodiciColori = $(".fields-container :input[name=codicecolore]");
    var ListaImmaginiFronte = $(".fields-container :input[name=filefronte]");
    var ListaImmaginiRetro = $(".fields-container :input[name=fileretro]");
    var ID_Prodotto = "1";            

    for (i = 0; i < ListaNomiColori.length; i++) {
         var formData = new FormData();
         var nome = ListaNomiColori[i].value;
         var codice = ListaCodiciColori[i].value;
         var fronte = ListaImmaginiFronte[i].files[0];
         var retro = ListaImmaginiRetro[i].files[0];

         formData.append("NomeColore", nome);
         formData.append("CodiceColore", codice);
         formData.append("Foto", fronte);
         formData.append("Foto", retro);
         formData.append("ID_Prodotto", ID_Prodotto);

         $.ajax({
             url: _NuovoProdottoCaricaModelli,
             data: formData,``
             processData: false,
             contentType: false,
             success: function (res) {
                  alert('succes!!');
             },
             error: function (res) {
                  alert("errror");
             }
       })
   }
});

Controller :

public JsonResult NuovoProdottoCaricaModelli(FormCollection form)
{
      ////code here
}

我的逻辑是: 我得到了我有多少个字段集，我得到了每个字段集的值并调用服务器进行上传。对于每个字段集，我有 2 个文本输入，2 个文件输入。我还必须将 ID 传递给第三个文本字段。

提前谢谢你。

Answer 1

感谢 darloopkat。我找到了一种方法。

下面是我的编辑:

js:

$('#step-2-next').click(function () {

            var ListaNomiColori = $(".fields-container :input[name=nomecolore]");
            var ListaCodiciColori = $(".fields-container :input[name=codicecolore]");
            var ListaImmaginiFronte = $(".fields-container :input[name=filefronte]");
            var ListaImmaginiRetro = $(".fields-container :input[name=fileretro]");
            var ID_Prodotto = "1";            

            for (i = 0; i < ListaNomiColori.length; i++) {

                var formData = new FormData();

                var nome = ListaNomiColori[i].value;
                var codice = ListaCodiciColori[i].value;
                var fronte = ListaImmaginiFronte[i].files[0];
                var retro = ListaImmaginiRetro[i].files[0];

                formData.append("NomeColore", nome);
                formData.append("CodiceColore", codice);
                formData.append("Foto", fronte);
                formData.append("Foto", retro);
                formData.append("ID_Prodotto", ID_Prodotto);

                $.ajax({
                    url: _NuovoProdottoCaricaModelli,
                    data: formData,
                    type: "POST",
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        alert('succes!!');
                    },
                    error: function (res) {
                        alert("errror");
                    }
                })
            }
        });

mvc Action :

[HttpPost]
        public ActionResult NuovoProdottoCaricaModelli()
        {
            string Nome = Request["NomeColore"];
            string CodiceColore = Request["NomeColore"];
            var Fronte = Request.Files[0];
            var NomeFronte = Path.GetFileName(Fronte.FileName);
            var Retro = Request.Files[1];
            var NomeRetro = Path.GetFileName(Retro.FileName);


            return Json("");
        }