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

第五步，创建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

（编辑：开发网_商丘站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!