asp.net mvc 實現文件上傳帶進度條的思路與方法

前言

文件上傳與下載的操作在實際項目中經常是很重要的一個內容，在使用ASP.NET Web Form的時候我們可以使用諸多的服務器控件，FileIpload就是其中之一，但是在ASP.NET不建議使用那些服務器控件，因為那樣違反三層架構原則。最近參考網絡資料，學習了ASP.NET MVC如何上傳文件。 而這篇文章主要重點是asp.net mvc 實現文件上傳帶進度條，下面來一起看看吧。

實現思路

ajax異步上傳文件，且開始上傳文件的時候啟動輪詢來實時獲取文件上傳進度。保存進度我采用的是memcached緩存，因為項目其他地方也用了的，所以就直接用這個啦。注意：不能使用session來保存進度，因為session是線程安全的不能實時獲取進度，可是試試httpcache或者memorycache，這兩個我沒有試過，請自行嘗試。

ps:使用websocket來實現也是不錯的，不過我沒有試過，有心的大神可以去試試。

下面貼效果圖：

實現方法如下

前端ajax上傳文件，我使用了兩種jq插件。一種是ajaxfileupload，一種是jquery.form.js(如需下載，請百度)。關於更多jQuery插件用法還可參閱本站相關專題： 《jQuery常用插件及用法總結》 。

下面的代碼是ajaxFileUpload的：

$.ajaxFileUpload
 (
 {
 url: '/WxManage/Media/UploadImage', //用於文件上傳的服務器端請求地址
 secureuri: false, //是否需要安全協議，一般設置為false
 fileElementId: 'postFile', //文件上傳域的ID
 type:"post",
 dataType: 'json', //返回值類型 一般設置為json
 success: function(data, status) //服務器成功響應處理函數
 {
 CloseProgressbar();//關閉進度條 設置進度條進度為100
 if (data.status == 1) {
  layer.msg(data.msg, { icon: 1, time: 1000 },function() {
  parent.location.reload();
  });
 } else {
  $("#btnUploadFile").attr("disabled", false);
  layer.msg(data.msg, { icon: 2, time: 1000 }); 
 }
 },
 error: function(data, status, e) //服務器響應失敗處理函數
 {
 $("#btnUploadFile").attr("disabled", false);
 CloseProgressbar();
 layer.closeAll("dialog");
 layer.msg("上傳失敗", { icon: 2, time: 1000 });
 }
 }
 );

後端接收文件上傳請求的action：

[HttpPost]
 public ActionResult UploadImage(HttpPostedFileBase postFile)
 {
 if (postFile == null)
 {
 return Json(BasicConfig.MessageConfig.Fail("上傳文件不得為空"));
 }

 try
 {
 string format = postFile.FileName.Split('.').Last();//後綴名
 SaveFile(postFile);
 return Json(BasicConfig.MessageConfig.Success("上傳成功"));
 }
 catch (Exception ex)
 {
 return Json(BasicConfig.MessageConfig.Fail("上傳失敗"));
 }
 }

SaveFile方法是保存文件的方法，采用的是文件流方式保存以便於計算上傳進度：

核心代碼：

FileStream fs = new FileStream(fileSavePath, FileMode.Create);
 BinaryWriter bw = new BinaryWriter(fs);
 BinaryReader br = new BinaryReader(postFile[i].InputStream);
 
 int readCount = 0;//單次讀取的字節數
 while ((readCount = br.Read(bufferByte, 0, readBufferSize)) > 0)
 {
  bw.Write(bufferByte, 0, readCount);//寫入字節到文件流
  bw.Flush();
  saveCount += readCount;//已經上傳的進度
  mem.SetValue("Admin_UploadSpeed_" + Session.SessionID, (saveCount * 1.0 / totalCount).ToString("0.00"), 60);//將更新到memcached緩存中
  Thread.Sleep(200);//為了看到明顯的過程故意暫停 
 }

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。