無法上傳多個文件

Question

我正在使用ASP.NET MVC 5,jquery最新版本。 我正嘗試使用jquery fileupload上傳多個文件，但我無法接收多個文件。

查看：

<input id="fileupload" type="file" multiple="multiple" name="files[]" > 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#fileupload').fileupload({ 
      dataType: 'json', 
      url: '/Media/UploadFiles', 
      autoUpload: true, 
      done: function (e, data) { 

      } 
     }).on('fileuploadprogressall', function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('.progress .progress-bar').css('width', progress + '%'); 
     }); 
    }); 
</script> 

控制器：

[HttpPost] 
     public ContentResult UploadFiles() 
     { 

      foreach (string file in Request.Files) 
      { } 
     } 

在這裏，在Request.Files我recieving只有一個文件。

Answer 1

您上傳的文件實際上是一個接一個發送的。

您可以更改服務代碼

[HttpPost] 
public JsonResult UploadFiles() 
{ 
    IList<string> filesSaved = new List<string>(); 

    foreach (string file in Request.Files) 
    { 
    HttpPostedFileBase hpf = Request.Files[file]; 
    if (hpf.ContentLength > 0) 
    { 
     var fileName = hpf.FileName; 
     filesSaved.Add(fileName); 
    } 
    } 

    return Json(new {files = filesSaved}, JsonRequestBehavior.DenyGet); 
} 

，並插入一個斷點，你會看到，請求經過一次爲每個文件要發送。

問題出在您的客戶端代碼中。該插件singleFileUploads中有一個選項，默認爲true，因爲您可以閱讀here。

你可以改變你的客戶端代碼中設置singleFileUploads: false：

$(document).ready(function() { 
     $('#fileupload').fileupload({ 
      dataType: 'json', 
      url: '/Media/UploadFiles', 
      autoUpload: true, 
      singleFileUploads: false, 
      done: function (e, data) { 

      } 
     }).on('fileuploadprogressall', function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('.progress .progress-bar').css('width', progress + '%'); 
     }); 
}); 

，並如預期正常工作了。