MVC6 - 使用Ajax將CSV文件和字符串上傳到控制器

Question

我遇到了麻煩。我需要將一個CSV文件連同字符串變量的值一起發送回控制器。

我已經設法通過表單的提交按鈕發送文件（只是通過提交），我也設法發送字符串變量回控制器（使用ajax後），但是當我將它們組合在一起和它不工作。

我有搜索下載/上傳文件（所有文件類型）在這個論壇上，但在這一點上沒有找到我想要的。我最近來到的是this。

這是CSHTML形式：

<form asp-action="FileIndexView" 
     asp-controller="SuburbsAndPostcodesAdmin" 
     method="post" 
     enctype="multipart/form-data"> 
    <div class="form-horizontal"> 
     <div class="form-group"> 
      <label class="col-md-4 control-label">Select the Suburbs and Postcodes latest CSV File:</label> 
      <input type="file" 
        name="CSVFile" 
        id="txtFileUpload" 
        class="col-md-8 control-label" /> 
     </div> 
     <div class="form-group"> 
      <input type="submit" 
        name="Submit" 
        value="Submit" 
        class="col-md-1 btn btn-primary" 
        disabled="disabled" 
        id="SubmitFile" /> 
     </div> 
    </div> 
</form> 

這裏是JavaScript：

//On button click send the connection id back to method FileIndexView. 
$('#SubmitFile').click(function (e) { 
    e.preventDefault(); // <------------------ stop default behaviour of button 

    var fileUpload = document.getElementById("txtFileUpload"); 
    var url = "/SuburbsAndPostcodesAdmin/FileIndexView"; 
    var connId = $.connection.hub.id; 

    //$.post(url, {"fileUpload": file, "connId": connId }); 

    $.ajax({ 
     type: "POST", 
     url: url, 
     data: { file: file, "connId": connId }, 
     processData: false, 
     contentType: false, 
     success: function (result) { 
      alert('Yay! It worked!'); 
     }, 
     error: function (result) { 
      alert('Oh no :('); 
     } 
    }); 

}); 

，這裏是控制器IActionResult：

[HttpPost] 
public IActionResult FileIndexView(IFormFile file, string connId) 
{ 
...stuff 
} 

其MVC6所以我用IFormFile。

我曾嘗試將文件ID的內容放入一個變量中，但它只是丟失了......您會注意到我也試過使用$ .post。如果我只發送字符串變量，我可以回到控制器。

我嘗試發送文件的方式有什麼問題，應該如何顯示以便具有IFormFile參數和字符串參數的控制器接受Ajax帖子？

Answer 1

您是否嘗試過使用FormData對象來發布您的文件+字符串？

var fd = new FormData();  
fd.append('file', connId); 
fd.append('connId', input.files[0]); 

$.ajax({ 
     type: "POST", 
     url: url, 
     data: fd, 
     processData: false, 
     contentType: false, 
     success: function (result) { 
      alert('Yay! It worked!'); 
     }, 
     error: function (result) { 
      alert('Oh no :('); 
     } 
});