jQuery ajax上傳文件，ID爲

Question

使用ASP.NET MVC5的Im。我的目標是使用jQuery ajax上傳文件。成功時，返回表中上傳文件的部分視圖。當我瀏覽jQuery代碼時，id和文件是正確的，但是當進入Action時，兩個參數都是空的。這裏是我的代碼：

控制器的操作：

[HttpPost] 
     public ActionResult AddAttachments(string id, IEnumerable< HttpPostedFileBase> files) 
     {    
      if (files != null) 
      { 
       //save files 
      } 
      var cardKey = db.CardKeys.Single(s => s.CardKeyID == Convert.ToInt32(id)); 
      var attachments = cardKey.Request.Attachments; 
      return PartialView("_AttachmentsTable",attachments); 
     } 

的jQuery：

$(function() { 
    var table = $("#attachmentTable").DataTable(); 
    var path = MySettings.addAttachmentURL; 
    $("#btnAddAttachment").click(function (event) { 
     event.preventDefault(); 

     var formData = new FormData(); 
     var cardKeyID = $("#CardKeyID").val(); 

     var formData = $.each($("#files")[0].files, function (i, file) { 
      formData.append('file-' + i, file); 
     }); 
     console.log("formData = " + formData); 
     $.ajax({ 
      type: "POST", 
      url: path, 
      contentType: false, 
      processData:false, 
      cache:false, 
      data: {id:cardKeyID,files: formData }, 
      success: function (partialResult) { 
       $("#tableData").html(partialResult); 
       table = $("#attachmentTable").DataTable(); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       $("#message").html(JSON.stringify(jqXHR).toString()); 
       alert("AJAX error: " + textStatus + ' : ' + errorThrown); 
      } 
     }); 
    }); 
}); 

Razor視圖：

<fieldset> 
      <legend>Add Attachments</legend> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div class="form-group"> 
        @Html.Label("File Upload", new { @class = "control-label col-md-6" }) 
        <div class="col-md-6"> 
         <input type="file" id="files" name="files" multiple/><br /> 
         <input type="submit" id="btnAddAttachment" value="Add Attachment"/> 

        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="form-group"> 
        @Html.Label("File Description", new { @class = "control-label col-md-6" }) 
        <div class="col-md-6"> 
         @Html.TextBox("FileDescription") 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="form-group"> 
        @Html.Label("Comment", new { @class = "control-label col-md-6" }) 
        <div class="col-md-6"> 
         @Html.TextBox("Comment") 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="tableData"> 
      @Html.Partial("_AttachmentsTable",Model.Request.Attachments) 
     </div> 
     </fieldset> 

Answer 1

的問題是，因爲你需要直接提供FormData到data$.ajax的財產，不在因爲它將被編碼。如果您需要將數據添加到請求，追加到FormData對象：

var formData = new FormData(); 
var cardKeyID = $("#CardKeyID").val(); 
var formData = $.each($("#files")[0].files, function (i, file) { 
    formData.append('file-' + i, file); 
}); 
formData.append('id', cardKeyID); 

$.ajax({ 
    data: formData, 
    // other properties here... 
}); 

然後在控制器需要直接從Request檢索數據：

[HttpPost] 
public ActionResult AddAttachments() 
{  
    var id = Request.Params["id"]; 
    foreach(var file in Request.Files) { 
     //save files 
    } 

    var cardKey = db.CardKeys.Single(s => s.CardKeyID == Convert.ToInt32(id)); 
    var attachments = cardKey.Request.Attachments; 
    return PartialView("_AttachmentsTable",attachments); 
} 

注意，如果form元素包含要在請求中發送所有領域，可以避開$.each並不必直接追加和簡單的使用：

var formData = new FormData($('form')[0]);