程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> ASP.NET基礎 >> asp.net mvc 實現文件上傳帶進度條的思路與方法

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

編輯:ASP.NET基礎

前言

文件上傳與下載的操作在實際項目中經常是很重要的一個內容,在使用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);//為了看到明顯的過程故意暫停 
 }

總結

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved