FORMDATA多文件上傳

Question

我的形式

@using (Html.BeginForm("ViewProjectAssignment", "AssignmentOfProject", FormMethod.Post, new { enctype = "multipart/form-data", @id="formAssignment" })) 
{ 
    @Html.AntiForgeryToken() 
    <table class="headertable">    
     <tbody> 
      <tr> 
       <td style="padding-left:50px; width:120px;"> 
        <b>Project Name</b> 
       </td> 
       <td> 
        @Html.DropDownListFor(mod => mod.ProjectName, Model.ProjectNameList, new { @class = "textBoxDisplay", @id = "ddlProjectName", style = "width:300px;" }) 
        @Html.ValidationMessageFor(x => x.ProjectName) 
       </td> 
      </tr> 
      <tr> 
       <td style="padding-left:50px; width:120px;"> 
        <b>CEQR Number</b> 
       </td> 
       <td> 
        @Html.DropDownListFor(mod => mod.CEQRNumber, Model.CEQRNumberList, new { @class = "textBoxDisplay", @id = "ddlCEQRNumber" }) 
        @Html.ValidationMessageFor(x => x.CEQRNumber) 
       </td> 
      </tr> 
      <tr> 
       <td style="padding-left:50px; width:120px;"> 
        <b>Upload File</b> 
       </td> 
       <td> 
        @Html.TextBoxFor(mod => mod.File, new { @class = "textBoxFileDisplay", style = "width:600px;", type = "file", multiple = "true", @id = "txtFiles" }) 
        @Html.ValidationMessageFor(x => x.File) 
       </td> 
      </tr> 
      <tr> 
       <td style="padding-left:50px; width:120px;"></td> 
       <td> 
        <button name="button" class="button" value="UploadFile" id="btnUploadFiles"> 
         Upload File 
        </button>       
        &nbsp; 
        <button name="button" value="create" class="button" id="btnClearSeach"> 
         Clear 
        </button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
} 

jQuery的

$('#btnUploadFiles').click(function (event) { 
     fnBlockUI(); 
     event.preventDefault(); 
     var data = new FormData(); 

     // add project Name, CeqrNumber and files to form here 

     $.ajax({ 
      url: '@Url.Action("ViewProjectAssignment", "AssignmentOfProject", new { Area = "PrivateCEQRApplication" })', 
      type: 'POST', 
      dataType: 'json', 
      cache: false, 
      headers: headers, 
      data: data,     
      success: function (result) { 
       $.unblockUI(); 
       $('body').empty().append(result); 
      }, 
      error: function (xhr, textStatus, errorThrown) { 
       $.unblockUI(); 
       alert("An error occurred while processing your request. Please try again. If the error persists, please email the account administrator ."); 
      } 
     }); 
    }); 

控制器方法

[HttpPost] 
public ActionResult ViewProjectAssignment(ProjectUploadFiles uploadFiles) 
{ 
    // Upload code here 
} 

型號

public class ProjectUploadFiles 
{ 
    public string CEQRNumber { get; set; } 

    public string ProjectName { get; set; } 

    public IEnumerable<HttpPostedFileBase> File { get; set; } 
} 

問題

我的應用程序允許用戶根據CEQRNumber和相應的ProjectName上傳多個文件。 btnUploadFiles單擊事件使ajax發佈，將選定的CEQRNumber，ProjectName和附加的文件傳遞給控制器​​。

我想使用Formdata（）進行上傳。我能夠上傳沒有其他參數的單個文件，但我不知道如何將多個文件和其他參數作爲formdata傳遞給我的控制器以作爲模型解析。

[HttpPost] 
public ActionResult ViewProjectAssignment(ProjectUploadFiles uploadFiles) 
{ 
    // Upload code here 
} 

Answer 1

爲什麼不用表單本身初始化表單數據？
您不想發送表單中的字段嗎？ 您想要發送的表單之外是否有字段？

$('#btnUploadFiles').click(function (event) { 
     fnBlockUI(); 
     event.preventDefault(); 
     var data = new FormData($('#formAssignment')[0]); 

     $.ajax({ 
      url: '@Url.Action("ViewProjectAssignment", "AssignmentOfProject", new { Area = "PrivateCEQRApplication" })', 
      type: 'POST', 
      dataType: 'json', 
      cache: false, 
      headers: headers, 
      data: data, 
      contentType: false, 
      processData: false,    
      success: function (result) { 
       $.unblockUI(); 
       $('body').empty().append(result); 
      }, 
      error: function (xhr, textStatus, errorThrown) { 
       $.unblockUI(); 
       alert("An error occurred while processing your request. Please try again. If the error persists, please email the account administrator ."); 
      } 
     }); 
    });