上傳文件並通過ajax發送給控制器 - jQuery

Question

我想將表單參數發送到服務器。

這是我的html：

<form enctype="multipart/form-data"> 
       <div> 
        <label>Name: *</label> 
        <input type="text" id="name"/> 
       </div> 
       <div> 
        <label>Description: *</label> 
        <input type="text" id="description"/> 
       </div> 
       <div> 
        <label>Rules: *</label> 
        <input type="text" id="rules"/> 
       </div> 
       <div> 
        <label/>Select File to Upload: <input id="fileUpload" type="file" /> 
       </div> 
       <div> 
        <button type="button" id="confirm" value="Confirm">Confirm</button> 
       </div> 
      </form> 

這裏的Ajax調用：

$(document).ready(function() { 
     $("button#confirm").click(function() { 
      var name = $("#name").val(); 
      var description = $("#description").val(); 
      var rules = $("#rules").val(); 

      var file = document.getElementById('fileUpload'); 
      if (file.files.length) { 
       var picture = file.files[0]; 
      } 

      var data = new FormData(); 
      data.append("name", name); 
      data.append("description", description); 
      data.append("rules", rules); 
      data.append("picture", picture); 


      $.ajax({ 
       type: "POST", 
       async: false, 
       url: "/api/forum/addNewForum", 
       async: false, 
       cache: false, 
       contentType: undefined, 
       processData: false, 
       data: data 
     }); 

而且我的控制器：

[HttpPost] 
    [AllowAnonymous] 
    [Route("addNewForum")] 
    public IHttpActionResult addNewForum() 
    {  
     var picture= HttpContext.Current.Request.Files["picture"];  
     return Ok; 
    } 

但我一直在這一行獲得空

var picture= HttpContext.Current.Request.Files["picture"];  

問題是，HttpContext.Current.Request.Files.Count始終是0. 這是我第一次做這樣的事情。我究竟做錯了什麼？還有更好的方法來做到這一點。提前致謝！

Answer 1

這裏您需要對代碼進行一些更改。
用下面的代碼替換你的ajax代碼。

$("button#confirm").click(function() { 

    var data = new FormData($("form")[0]); 

    $.ajax({ 
     type: "POST", 
     url: "/api/forum/addNewForum", 
     contentType: false, 
     processData: false, 
     data: data 
    }); 
}); 

然後嘗試提交表單檢查你所得到的迴應