asp.net单文件带进度条上传的解决方案

页面导航:首页 > 网络编程 > ASP.NET > asp.net单文件带进度条上传的解决方案

asp.net单文件带进度条上传的解决方案

来源:互联网 作者:脚本宝典 时间:2015-09-14 18:28 【

最近做项目中遇到很多问题,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传(可能是我没找到),下面我来跟大家分享一下我实现的这个程序
最近做项目中遇到很多问题,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传(可能是我没找到),下面我来跟大家分享一下我实现的这个程序。
首先看下界面效果,当然你可以完全修改界面为你自己所用。
先解释一下这个程序,该程序采用了jquery框架,实现了小文件上传,不超过80Mb,可以在web.config文件中进行相应的配置,但是有个最大值,具体需要查看msdn。开发环境采用visual studio 2013 .net framework 4.5,运行的时候大家注意一下是否满足要求,好了,下面直入正题。
先来看看实现原理。基本原理:一个页面进行文件上传,另外一个页面去监听这个文件上传了多少。
这里面有两个地方需要解释一下:第一个,如何知道监听的这个文件就是上传的这个文件?实现机制很简单,就是让asp.net产生一个唯一的guid,这个id序号是唯一的,通过ajax取出来赋值给一个隐藏字段;第二个,如何获取guid标志的文件信息?通过asp.net缓存机制实现,上传的过程中,不断的将上传信息往缓存里面写,直到文件上传完成,而在另外一个通过guid获取缓存的信息,信息包括你想要的信息,比如上传了多少字节、消耗了多长时间等。好了,要点就解释到这里,有疑问的话给我留言。
下面来说说具体的实现:
文件目录结构如下:
 
index.htm就是文件上传页面,提交form给UploadHandler目录下的Default.aspx,以实现文件上传。
ProgressHandler目录下三个文件为Abort.ashx、GenericGuid.ashx,Handler.ashx功能分别为:根据Guid取消正在上传的文件,生成Guid,根据Guid获取上传信息。
第一步:建立index.htm页面,这个上传页面,需要注意的就是需要一个隐藏的iframe,并且名字为form提交的目标。
?
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>ASP.NET Ajax文件上传进度条示例</title>  <meta name="author" content="李检全" />  <link href="Styles/base.css" rel="stylesheet" type="text/css" />  <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>  <script src="Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>  <script src="Scripts/ljq.lib.js" type="text/javascript"></script>  <script src="Scripts/Ajax/GuidGet.js" type="text/javascript"></script>  <script src="Scripts/Ajax/ajax-progress-upload.js" type="text/javascript"></script> </head> <body>  <div id="upload_demo">   <div class="title">ASP.NET Ajax 文件上传进度条示例</div>   <form action="UploadHandler/Default.aspx" enctype="multipart/form-data" method="post" target="upload_hidden_iframe">    <input id="guid" name="guid" value="" type="hidden" />    <p>*本程序适合小文件上传,不超过80Mb</p>    <p>文件地址</p>    <input name="upload_file" type="file" />    <br />    <p>文件描述</p>    <textarea name="description_file"></textarea>    <br />    <br />    <input type="submit" value="上传文件" />   </form>  </div>  <div id="back_panel"></div>  <div id="upload_panel">   <div id="upload_title">文件上传</div>   <div id="upload_content">      <ul>     <li id="finished_percent">正在准备上传...</li>     <li><div id="upload_bar"><div id="upload_progress"></div></div></li>     <li id="upload_speed"></li>     <li id="upload_costTime"></li>     <li id="upload_fileSize"></li>     <li id="upload_fileName"></li>    </ul>      <div id="upload_detail"></div>    <div id="upload_choose">     <span id="upload_cancel">取消</span><span id="upload_submit">确定</span>    </div>   </div>  </div>  <iframe name="upload_hidden_iframe" style="display:none;"></iframe>     </body> </html>    
第二步,创建GenerateGuid.ashx文件,作用就是生成唯一的Guid。
?
1234567891011121314151617181920212223242526272829303132333435363738    <%@ WebHandler Language="C#" Class="ProgressHandler.Handler" %>   using System; using System.Web; using System.Xml.Linq;   namespace ProgressHandler {  public class Handler : IHttpHandler  {   /// <summary>   /// 获得上传文件的GUID   /// </summary>   /// <param name="context">当前请求实体</param>   /// <creattime>2015-06-28</creattime>   /// <author>FreshMan</author>   public void ProcessRequest(HttpContext context)   {    context.Response.Charset = "utf-8";    context.Response.ContentType = "application/xml";    var guid = Guid.NewGuid().ToString();    var doc = new XDocument();    var root = new XElement("root");      var xGuid = new XElement("guid", guid);    root.Add(xGuid);    doc.Add(root);    context.Response.Write(doc.ToString());    context.Response.End();   }     public bool IsReusable   {    get { return false; }   }    } }    
第三步,创建Default.aspx文件,用于提交表单时上传文件。
?
1234567891011121314    using System;   namespace UploadHandler {  public partial class UploadHandlerDefault : System.Web.UI.Page  {   protected void Page_Load(object sender, EventArgs e)   {    string guid = Request.Params["guid"];    UploadUtil utilHelp = new UploadUtil(this, guid);    utilHelp.Upload();   }  } }    
上传核心代码:
?
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576    using System; using System.Web; using System.IO; using System.Configuration; using System.Web.UI; using System.Web.Caching; using System.Threading; public class UploadUtil {  private Stream _reader;  private FileStream _fStream;  private const int Buffersize = 10000;  private readonly string _filePath =new Page().Server.MapPath(ConfigurationManager.AppSettings["upload_folder"]);  private readonly Page _page;  private readonly string _guid;  public UploadUtil(Page page, string guid)  {   _page = page;   _guid = guid;  }  public void Upload()  {   if (_page.Request.Files.Count > 0)   {    DoUpload(_page.Request.Files[0]);   }  }  private void DoUpload(HttpPostedFile postedFile)  {   bool abort = false;   string uploadFilePath = _filePath + DateTime.Now.ToFileTime()+"//";   if (!Directory.Exists(uploadFilePath))   {    Directory.CreateDirectory(uploadFilePath);   }   string uploadFileName = postedFile.FileName;   DownloadingFileInfo info = new DownloadingFileInfo(uploadFileName, postedFile.ContentLength, postedFile.ContentType);   object fileObj = HttpContext.Current.Cache[_guid];   if (fileObj != null)   {    HttpContext.Current.Cache.Remove(_guid);   }   HttpContext.Current.Cache.Add(_guid, info, null, DateTime.Now.AddDays(1), TimeSpan.Zero, CacheItemPriority.AboveNormal, null);   DateTime begin=DateTime.Now.ToLocalTime();   _fStream = new FileStream(uploadFilePath + uploadFileName, FileMode.Create);   _reader = postedFile.InputStream;   byte []buffer=new byte[Buffersize];   int len = _reader.Read(buffer,0,Buffersize);     while (len > 0&&!abort)   {    _fStream.Write(buffer,0,len);    DateTime end = DateTime.Now.ToLocalTime();    info.CostTime = (long)(end - begin).TotalMilliseconds;    info.FileFinished += len;      //模拟延时用,实际应用的时候注销他    Thread.Sleep(1000);      HttpContext.Current.Cache[_guid] = info;    abort=((DownloadingFileInfo)HttpContext.Current.Cache[_guid]).Abort;    len = _reader.Read(buffer,0,Buffersize);   }      _reader.Close();   _fStream.Close();   if (abort)   {    if (File.Exists(uploadFilePath + uploadFileName))    {     File.Delete(uploadFilePath + uploadFileName);    }   }  }    }    
 
第四步,创建Handler.ashx文件,用于查看文件上传情况。
?
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566    <%@ WebHandler Language="C#" Class="ProgressHandler.Handler" %>   using System.Web; using System.Xml.Linq;   namespace ProgressHandler {  public class Handler : IHttpHandler  {   /// <summary>   /// 获得上传文件的进度   /// </summary>   /// <param name="context">当前请求实体</param>   /// <creattime>2015-06-28</creattime>   /// <author>FreshMan</author>   public void ProcessRequest(HttpContext context)   {    context.Response.ContentType = "application/xml";    context.Response.Charset = "utf-8";    var guid = context.Request.Form["guid"];    var info = context.Cache[guid] as DownloadingFileInfo;    var doc = new XDocument();    var root = new XElement("root");    if (info != null)    {     var fileName = new XElement("fileName", info.FileName);     var fileFinished = new XElement("fileFinished", info.FileFinished);     var fileSize = new XElement("fileSize", info.FileSize);     var costTime = new XElement("costTime", info.CostTime);     var fileState = new XElement("fileState", info.FileState);     var speed = new XElement("speed", info.Speed);     var percent = new XElement("percent", info.Percent);     var abort = new XElement("abort", false);     root.Add(fileName);     root.Add(fileFinished);     root.Add(fileSize);     root.Add(costTime);     root.Add(fileState);     root.Add(speed);     root.Add(percent);     if (info.Abort)     {      abort.Value = info.Abort.ToString();      context.Cache.Remove(guid);     }     if (info.FileState == "finished")     {      context.Cache.Remove(guid);     }    }    else   {     var none = new XElement("none", "no file");     root.Add(none);    }    doc.Add(root);    context.Response.Write(doc.ToString());    context.Response.End();   }     public bool IsReusable   {    get { return false; }   }  } }    
第五步,创建Abort.ashx文件,用于取消上传。
?
123456789101112131415161718192021222324252627282930313233343536373839404142    <%@ WebHandler Language="C#" Class="ProgressHandler.Abort" %> using System.Web; using System.Xml.Linq;   namespace ProgressHandler {  public class Abort : IHttpHandler  {   /// <summary>   /// 取消上传处理程序   /// </summary>   /// <param name="context">当前请求实体</param>   /// <creattime>2015-06-28</creattime>   /// <author>FreshMan</author>   public void ProcessRequest(HttpContext context)   {    context.Response.ContentType = "application/xml";    context.Response.Charset = "utf-8";    var guid = context.Request.Form["guid"];    var abort = !string.IsNullOrEmpty(context.Request.Form["abort"]);    var info = context.Cache[guid] as DownloadingFileInfo;    if (info != null)    {     info.Abort = abort;     context.Cache[guid] = info;    }    var doc = new XDocument();    var root = new XElement("root");    var flag = new XElement("flag", info == null ? "false" : "true");    root.Add(flag);    doc.Add(root);    context.Response.Write(doc.ToString());    context.Response.End();   }     public bool IsReusable   {    get { return false; }   }    } }    
好了,下面就是编写javascript脚本了,我引用了jquery这个框架,另外还用了ui框架。
核心代码是ajax-progress-upload.js文件,另外还有一个获取guid的文件。
?
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124    $(document).ready(function () {  var _guid_url = "ProgressHandler/GenerateGuid.ashx";  var _progress_url = "ProgressHandler/Handler.ashx";  var _abort_url = "ProgressHandler/Abort.ashx";  var _target = "#guid";  var _guid = "";  var _cancel = false;  var _timer;  LJQ.setGuid(_target, _guid_url);  $("#upload_panel").draggable({ handle: "#upload_title" });  $("#upload_choose span").hover(function () {   $(this).css({    "color": "#f6af3a",    "border": "1px solid #e78f08"  });  }, function () {   $(this).css({    "color": "#1c94cd",    "border": "1px solid #ddd"  });  });  $("#upload_cancel").click(function () {   $.ajax({    url: _abort_url,    data: { guid: _guid, abort: true },    dataType: "xml",    type: "post",    success: function () {       $("#upload_panel").fadeOut('fast');     $("#back_panel").fadeOut(1000);     window.clearInterval(_timer);    }   });      });  $("#upload_submit").click(function () {   $("#upload_panel").fadeOut('fast');   $("#back_panel").fadeOut("1000");  });  $("form").submit(function () {   _guid = $(_target).val();   if ($("input[name='upload_file']").val() == "") {    alert("未指定上传文件!");    return false;   }   $("#upload_progress").css("width", "0%");   $("#finished_percent").html("准备上传...");   $("#upload_speed").html("");   $("#upload_fileName").html("");   $("#upload_fileSize").html("");   $("#upload_costTime").html("");   var _option = {    url: _progress_url,    data: { guid: _guid },    dataType: "xml",    type: "post",    beforeSend: function () {     $("#back_panel").fadeTo('fast', '0.5');     $("#upload_panel").fadeIn('1000');    },    success: function (response) {       if ($(response).find("root abort").text() == "true") {      $("#upload_panel").fadeOut('fast');      $("#back_panel").fadeOut(1000);      window.clearInterval(_timer);     }       else if ($(response).find("root none").text() == "no file") {       }     else {      var _percent = ($(response).find("root percent").text() * 100);      var _speed = $(response).find("root speed").text();      var _fileSize = $(response).find("root fileSize").text();      var _upload_costTime = $(response).find("root costTime").text();      if (parseInt(_speed) < 1024) {       _speed = LJQ.toFix(_speed) + "Kb";      } else {       _speed = LJQ.toFix(_speed / 1024) + "Mb";      }        if (parseInt(_fileSize) / 1024 < 1024) {       _fileSize = LJQ.toFix(_fileSize / 1024) + "Kb";      } else if (parseInt(_fileSize) / 1024 / 1024 < 1024) {       _fileSize = LJQ.toFix(_fileSize / 1024 / 1024) + "Mb";      } else {       _fileSize = LJQ.toFix(_fileSize / 1024 / 1024 / 1024) + "Gb";      }        if (_upload_costTime < 1000) {       _upload_costTime = _upload_costTime + "毫秒";      } else if (_upload_costTime / 1000 < 60) {       _upload_costTime = parseInt(_upload_costTime / 1000) + "秒" + _upload_costTime % 1000 + "毫秒";      } else {       _upload_costTime = parseInt(_upload_costTime / 1000 / 60) + "分" + parseInt((_upload_costTime % 60000) / 1000) + "秒" + _upload_costTime % 1000 + "毫秒";      }      $("#upload_progress").css("width", parseInt(_percent) + "%");      $("#finished_percent").html("完成百分比:" + LJQ.toFix(_percent) + "%");      $("#upload_speed").html("上传速度:" + _speed + "/sec");      $("#upload_fileName").html("文件名称:" + $(response).find("root fileName").text());      $("#upload_fileSize").html("文件大小:" + _fileSize);      $("#upload_costTime").html("上传耗时:" + _upload_costTime);      if (_percent >= 100) {         window.clearInterval(_timer);       $("#finished_percent").html("<span style='color:green;'>文件上传完成</span>");      }      if (_cancel) {       window.clearInterval(_timer);      }     }      },    error: function () { }   };     _timer = window.setInterval(function () { $.ajax(_option); }, 1000);    });   });    
以上为代码的主要部分。asp.net单文件带进度条上传,不属于任务控件,也不是flash类型的上传,完全是asp.net、js、css实现上传。源码为开发测试版,需要使用的亲需要注意修改配置文件。


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<