AJAXは、データと複数の画像を含むフォームをasp.net mvcアクションに送信します

Question

これは2日間のようです。私はウェブ上で検索してきましたが、解決策を見つけることはできません。

私はテキストを挿入して画像を選択できるいくつかの入力フィールドを持っています。それらは可変です。つまり、より多くのフィールドに、 "+"をクリックして別のフィールドセットを追加する製品を追加したい場合です。私は「サルバE 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を3番目のテキストフィールドに渡す必要があります。

ありがとうございます。

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アクション：私はそれを行うためにDropzone.jsを使用していた最近のプロジェクトで

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