AJAX发送表单与数据和多个图像到asp.net mvc行动

Question

它已经像两天。我一直在网上搜索，但我无法找出解决方案。

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

当我点击“萨尔瓦éProsegui”，所有的数据传送到控制器我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"); 
      } 
     }) 
    } 
}); 

控制器：

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

我的逻辑是： 我得到我有多少场组具有和EA一个我得到的价值，并呼吁上传服务器。对于每个字段集，我有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行动：

[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(""); 
     }