相信通过Asp Net的服务器控件上传文件在简单不过了 通过AjaxToolkit控件实现上传进度也不是什么难事 为什么还要自己辛辛苦苦来 实现呢？我并不否认”拿来主义“ 只是我个人更喜欢凡是求个所以然 本篇将阐述通过Html IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理 希望对你有多帮助
效果图
本文涉及到的知识点 前台用到Html Ajax JQuery JQuery UI
后台用到一般处理程序(IHttpHandler)和一般异步处理程序(IHttpAsyncHandler) 并涉及到”推模式“
一 创建Html网页
在创建的Web工程中添加一个Html文件 命名为UploadFile 在头文件中引入JQuery JQuery UI
<link href="Styles/jquery ui custom css" rel="stylesheet" type=text/css /><script src=Scripts/jquery min js type=text/javascript></script><script src=Scripts/jquery ui custom min js type=text/javascript></script>
关于无刷新文件上传
通过Ajax是不能上传文件的 无刷新上传是靠隐藏的iframe来实现的
<form id="form" target = "frameFileUpload" enctype="multipart/form data"><div id="progressBar" ></div><input type=file id="fileUpload" name=fileUpload /><span id="progressValue"></span><iframe id="frameFileUpload" name=frameFileUpload ></iframe><br /><input type=submit value="上传" id = "submit"/></form>
要将form标签的target属性设置为iframe的id 当然别忘了将form的enctype设置为multipart/form data
<div id="progressBar" class="page_speeder_1512316621"></div>
是用来显示上传文件时的进度条
在JS中加入如下处理
<script type=text/javascript>$(function () { $("#submit") button()$("#fileUpload") button()})</script>
此时效果:
二 实现文件上传
添加一个一般处理程序 命名为UploadFileHandler ashx
lishixinzhi/Article/program/net/201311/14305asp.net中给应用增加进度条的实现方法：
建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：
<!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" id="mainWindow">
<head>
<title>无标题页</title>
<script language="javascript">
function SetPorgressBar(pos)
{
//设置进度条居中
var screenHeight = window["mainWindow"].offsetHeight
var screenWidth = window["mainWindow"].offsetWidth
ProgressBarSide.style.width = Math.round(screenWidth / 2)
ProgressBarSide.style.left = Math.round(screenWidth / 4)
ProgressBarSide.style.top = Math.round(screenHeight / 2)
ProgressBarSide.style.height = "21px"
ProgressBarSide.style.display = ""
//设置进度条百分比
ProgressBar.style.width = pos + "%"
ProgressText.innerHTML = pos + "%"
}
//完成后隐藏进度条
function SetCompleted()
{
ProgressBarSide.style.display = "none"
}
</script>
</head>
<body>
<div id="ProgressBarSide" style="position:absoluteheight:21xwidth:100pxcolor:Silverborder-width:1pxborder-style:Soliddisplay:none">
<div id="ProgressBar" style="position:absoluteheight:21pxwidth:0%background-color:#3366FF"></div>
<div id="ProgressText" style="position:absoluteheight:21pxwidth:100%text-align:center"></div>
</div>
</body>
</html>
后台代码，Default.aspx.cs：
using System
sing System.Data
sing System.Configuration
sing System.Web
sing System.Web.Security
sing System.Web.UI
sing System.Web.UI.WebControls
sing System.Web.UI.WebControls.WebParts
sing System.Web.UI.HtmlControls
sing System.Threading
sing System.IO
ublic partial class _Default : System.Web.UI.Page
private void beginProgress()
{
//根据ProgressBar.htm显示进度条界面
string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm")
StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"))
string html = reader.ReadToEnd()
reader.Close()
Response.Write(html)
Response.Flush()
}
private void setProgress(int percent)
{
string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "')</script>"
Response.Write(jsBlock)
Response.Flush()
}
private void finishProgress()
{
string jsBlock = "<script>SetCompleted()</script>"
Response.Write(jsBlock)
Response.Flush()
}
private void Page_Load(object sender, System.EventArgs e)
{
beginProgress()
for (int i = 1i <= 100i++)
{
setProgress(i)
//此处用线程休眠代替实际的 *** 作，如加载数据等
System.Threading.Thread.Sleep(50)
}
finishProgress()
}
你在窗体上拉个进度条进来，然后在窗体上放个按钮，在按钮点击事件里写如下 ：progressBar1.Maximum = 100//设置最大长度值
progressBar1.Value = 0//设置当前值
progressBar1.Step = 5//设置没次增长多少
for (int i = 0i <10i++)//循环
{
System.Threading.Thread.Sleep(1000)//暂停1秒
progressBar1.Value += progressBar1.Step让进度条增加一次
}
10分也就只能这么详细了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）