MVC jQuery的文件上傳Request.Files總是空

Question

我一直在網上搜索尋找答案，這個問題，但我似乎無法找到任何工作，我有以下的控制器代碼：

[HttpPost] 
public ActionResult UploadFiles() 
{ 
    // If files exist 
    if (Request.Files != null && Request.Files.Count > 0) 
    { 
     // ** Do stuff 

     return Json(new { result = true, responseText = "File(s) uploaded successfully" }); 
    } 

    // Return no files selected 
    return Json(new { result = false, responseText = "No files selected" }); 
} 

而且下面我CSHTML頁面代碼的正常工作和控制器可以看到我上傳的文件：

<input type="file" name="files" id="files" accept="image/*;capture=camera" multiple> 
<button type="button" onclick="submitform()">Submit</button> 

<script> 
    function submitform(){ 

     // Get files from upload 
     var files = $("#files").get(0).files; 

     // Create form data object 
     var fileData = new FormData(); 

     // Loop over all files and add it to FormData object 
     for (var i = 0; i < files.length; i++) { 
      fileData.append(files[i].name, files[i]); 
     } 

     // Send files to controller 
     var xhr = new XMLHttpRequest(); 
     xhr.open("POST", "/Quotes/QuoteFiles/UploadFiles", false); 
     xhr.send(fileData);  
    } 

</script> 

然而，當我嘗試改變這種使用Ajax調用工作，因爲在控制器圖所示，然後Request.Files始終沒有文件。我已經改變了只位的是「發送文件到控制器」部分：

<input type="file" name="files" id="files" accept="image/*;capture=camera" multiple> 
<button type="button" onclick="submitform()">Submit</button> 

<script> 
    function submitform(){ 

     // Get files from upload 
     var files = $("#files").get(0).files; 

     // Create form data object 
     var fileData = new FormData(); 

     // Loop over all files and add it to FormData object 
     for (var i = 0; i < files.length; i++) { 
      fileData.append(files[i].name, files[i]); 
     } 

     // Send files to controller 
     $.ajax({ 
      url: '/Quotes/QuoteFiles/UploadFiles', 
      type: "POST", 
      contentType: false, // Not to set any content header 
      processData: false, // Not to process data 
      data: fileData, 
      success: function (result) { 
       alert(result); 
      }, 
      error: function (err) { 
       alert(err.statusText); 
      } 
     }); 

    } 

</script> 

我在谷歌瀏覽器上運行，但我已經試過IE 11和邊緣但不是他們的工作。誰能告訴我我做錯了什麼？

Answer 1

嘗試使用fileReader而不是formData，並將mimetype改爲'text/plain;字符集= X-用戶自定義的二進制」

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example_Uploading_a_user-selected_file

Answer 2

我終於發現是什麼原因導致這個問題，我有我的_Layout.cshtml頁下面的代碼是有自動送AntiForgeryToken上的任何我做的ajax請求，這似乎是導致問題，因爲一旦我刪除它Request.Files不是空的。我現在需要看到，如果我能找到一種方法，在添加此代碼回到了它不會停止文件上傳工作：

$(document).ready(function() { 
    var securityToken = $('[name=__RequestVerificationToken]').val(); 
    $(document).ajaxSend(function (event, request, opt) { 
     if (opt.hasContent && securityToken) { // handle all verbs with content 
      var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(securityToken); 
      opt.data = opt.data ? [opt.data, tokenParam].join("&") : tokenParam; 
      // ensure Content-Type header is present! 
      if (opt.contentType !== false || event.contentType) { 
       request.setRequestHeader("Content-Type", opt.contentType); 
      } 
     } 
    }); 
}); 

**** ****編輯

我現在已經返工如下圖所示添加'if（opt.data！=「[object FormData]」'通過在文件上傳時不調用代碼來解決問題：

$(document).ready(function() { 
    var securityToken = $('[name=__RequestVerificationToken]').val(); 
    $(document).ajaxSend(function (event, request, opt) { 
     if (opt.hasContent && securityToken) { // handle all verbs with content 
      // If not "FormData" (i.e. not a file upload) 
      if (opt.data != "[object FormData]") 
      { 
       var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(securityToken); 
       opt.data = opt.data ? [opt.data, tokenParam].join("&") : tokenParam; 
       // ensure Content-Type header is present! 
       if (opt.contentType !== false || event.contentType) { 
        request.setRequestHeader("Content-Type", opt.contentType); 
       } 
      } 

     } 
    }); 
});