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提交的目标。

<!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。

<%@ 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文件,用于提交表单时上传文件。

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();
  }
 }
} 

上传核心代码:

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文件,用于查看文件上传情况。

<%@ 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文件,用于取消上传。

 <%@ 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的文件。

$(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实现上传。源码为开发测试版,需要使用的亲需要注意修改配置文件。

项目源码下载请点击这里:http://xiazai.jb51.net/201509/yuanma/asp_net_progressbar(jb51.net).rar

时间: 2015-09-05

ASP.NET实现用图片进度条显示投票结果

一个投票功能模块少不了查看投票结果,用进度条显示各个投票结果可以起到一目了然的效果.以下是我的方法,请大家不吝赐教:  1:做一张图片用于做进度条,只需要很小的一个图片就可以了,如高20px,宽1px. 2:在要显示进度条的单元格中插入image控件,其imageUrl设置为已做好的图片的位置. 3:用一个dataReader对象dr保存取出的各项票数,用一个int 型变量sum保存取出的总票数,各项分别再定义一个double型变量用来保存单项票数除以(/)总票数的结果(小数),再定义一个int

asp.net 生成静态页时的进度条显示

asp.net如何生成静态页,请参考下面的文章:http://www.jb51.net/article/18175.htm而我们用模拟的话,只需要让线程延迟执行就可以了.比如下面的代码: 复制代码 代码如下: for (int i = 0; i < 10; i++) { DateTime startTime = DateTime.Now; Response.Write(i + "-------------执行时间:" + startTime.ToString()+"&l

asp.net文件上传带进度条实现案例(多种风格)

先饱饱眼福: 在之前的文章中也有类似带进度条文件传送的案例,大家可以翻阅之前的文章对知识点进行扩充. 部分代码: <%@ Page Language="C#" %> <%@ Register Assembly="MattBerseth.WebControls.AJAX" Namespace="MattBerseth.WebControls.AJAX.Progress" TagPrefix="mb" %>

asp.net web大文件上传带进度条实例代码

复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Syste

asp.net 在客户端显示服务器端任务处理进度条的探讨

下面就是采用静态变量的方法实现的: 复制代码 代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd"> <script runat="server"

ASP.NET实现进度条效果

我们先看下进度条效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <script language="javascript"> function SetPorgressBar(pos) { //设置进度条居中 var screenWidth = document.body.offsetWidth; ProgressBarSide.style.wid

利用Asp.Net回调机制实现进度条

其效果如下:首先,在HTML文档中加入如下代码:<div> <table class="statusTable"> <tr> <td id="progress1"> </td> <td id="progress2"> </td> <td id="progress3"> </td> <td id="prog

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

asp.net mvc 实现文件上传带进度条的思路与方法

前言 文件上传与下载的操作在实际项目中经常是很重要的一个内容,在使用ASP.NET Web Form的时候我们可以使用诸多的服务器控件,FileIpload就是其中之一,但是在ASP.NET不建议使用那些服务器控件,因为那样违反三层架构原则.最近参考网络资料,学习了ASP.NET MVC如何上传文件. 而这篇文章主要重点是asp.net mvc 实现文件上传带进度条,下面来一起看看吧. 实现思路 ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度.保存进度我采用的是memc

asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作.在目前Web开发中用的比较多的,可能uploadify(参考http://www.uploadify.com/)也算一个吧,不过这个版本一直在变化,他们的脚本调用也有很大的不同,甚至调用及参数都一直在变化,很早的时候,那个Flash的按钮文字还没法变化,本篇随笔主要根据项目实际,介绍一下3.1版本的uploadify的控件使用,这版本目前还是最新的

Android实现文件上传和下载倒计时功能的圆形进度条

screenshot 截图展示 import step1. Add it in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } step2. Add the dependency dependencies { compile 'com.github.yanjiabin:ExtendsRingPrigr

ASP.NET中FileUpload文件上传控件应用实例

使用 FileUpload 控件,可以为用户提供一种将文件从用户的计算机发送到服务器的方法.该控件在允许用户上载图片.文本文件或其他文件时很有用.要上载的文件将在回发期间作为浏览器请求的一部分提交给服务器.在文件上载完毕后,您可以用代码管理该文件. 大致了解了一下FileUpload,让我们来看一下FileUpload几个实际应用中问题的处理方法. 1.一次上传多个文件 要一次上传多个文件,我们可以像传单个文件那样对每个文件单独进行处理,除此之外,我们还可以使用HttpFileCollectio

android 开发中使用okhttp上传文件到服务器

开发android手机客户端,常常会需要上传文件到服务器,比如:你手机里的照片. 使用okhttp会是一个很好的选择.它使用很简单,而且运行效率也很高. 首先,在 app/build.gradle 的 dependencies 增加 implementation 'com.squareup.okhttp3:okhttp:3.8.1' 可以参照如下代码 apply plugin: 'com.android.application' apply plugin: 'kotlin-android' ap

Java中实现文件上传下载的三种解决方案(推荐)

java文件上传与文件下载是程序开发中比较常见的功能,下面通过本文给大家介绍Java中实现文件上传下载的三种解决方案,具体详情如下所示: 第一点:Java代码实现文件上传 FormFile file=manform.getFile(); String newfileName = null; String newpathname=null; String fileAddre="/numUp"; try { InputStream stream = file.getInputStream(

PHP中,文件上传

在PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destination )本函数检查并确保由 filename 指定的文件是合法的上传文件(即通过 PHP 的 HTTP POST 上传机制所上传的).如果文件合法,则将其移动为由 destination 指定的文件. 如果 filename 不是合法的上传文件,不会出现任何操作,move_uploaded_fil

IIS 7 中设置文件上传大小限制设置方法

在IIS 6.0中设置文件上传大小的方法,就是配置如下节点: 复制代码 代码如下: <system.web><httpRuntime maxRequestLength="1048576" executionTimeout="600"/>        </system.web> 但在IIS7中,设置如上设置后,不管设置多大数值,最大上传了限制为30M 还要进行如下设置才能正确: 方法1: appcmd set config &qu

在Koa.js中实现文件上传的接口功能

文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片.上传Excel等. 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始.最后分别用 Postman 和一个HTML页面来测试. 01-环境准备 首先当然是要初始化一个Koa项目了,安装 Koa.koa-router 即可. npm install koa koa-router 设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下: koa-upload/

python中Django文件上传方法详解

Django上传文件最简单最官方的方法 1.配置media路径 在settings.py中添加如下代码: MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 2.定义数据表 import os from django.db import models from django.utils.timezone import now as timezone_now def upload_to(instance, filename):     now = timezo

jQuery.uploadify文件上传组件实例讲解

1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/