快捷導航

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

更新時間：2016年12月06日 11:18:49 作者：辰曉晨

這篇文章主要給大家介紹了關(guān)于asp.net mvc 實現(xiàn)文件上傳帶進度條的思路與方法，文中給出了詳細的示例代碼，相信對大家的理解和學習很有幫助，有需要的朋友們可以參考借鑒，下面來跟著小編一起學習學習吧。

前言

實現(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);//為了看到明顯的過程故意暫停 
 }

總結(jié)

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

您可能感興趣的文章: