怎么在asp.net mvc中實現(xiàn)一個帶進度條的文件上傳功能

怎么在asp.net mvc中實現(xiàn)一個帶進度條的文件上傳功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

實現(xiàn)思路

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

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

下面貼效果圖：

實現(xiàn)方法如下

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

下面的代碼是ajaxFileUpload的：

$.ajaxFileUpload
 (
 {
 url: '/WxManage/Media/UploadImage', //用于文件上傳的服務(wù)器端請求地址
 secureuri: false, //是否需要安全協(xié)議，一般設(shè)置為false
 fileElementId: 'postFile', //文件上傳域的ID
 type:"post",
 dataType: 'json', //返回值類型 一般設(shè)置為json
 success: function(data, status) //服務(wù)器成功響應(yīng)處理函數(shù)
 {
 CloseProgressbar();//關(guān)閉進度條 設(shè)置進度條進度為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) //服務(wù)器響應(yīng)失敗處理函數(shù)
 {
 $("#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;//單次讀取的字節(jié)數(shù)
 while ((readCount = br.Read(bufferByte, 0, readBufferSize)) > 0)
 {
  bw.Write(bufferByte, 0, readCount);//寫入字節(jié)到文件流
  bw.Flush();
  saveCount += readCount;//已經(jīng)上傳的進度
  mem.SetValue("Admin_UploadSpeed_" + Session.SessionID, (saveCount * 1.0 / totalCount).ToString("0.00"), 60);//將更新到memcached緩存中
  Thread.Sleep(200);//為了看到明顯的過程故意暫停 
 }

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。