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

相信通过Asp Net的服务器控件上传文件在简单不过了通过AjaxToolkit控件实现上传进度也不是什么难事为什么还要自己辛辛苦苦来实现呢？我并不否认”拿来主义“ 只是我个人更喜欢凡是求个所以然本篇将阐述通过Html IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理希望对你有多帮助

效果图

本文涉及到的知识点 前台用到Html Ajax JQuery JQuery UI

后台用到一般处理程序(IHttpHandler)和一般异步处理程序(IHttpAsyncHandler) 并涉及到”推模式“

一创建Html网页

在创建的Web工程中添加一个Html文件命名为UploadFile 在头文件中引入JQuery JQuery UI

关于无刷新文件上传

通过Ajax是不能上传文件的无刷新上传是靠隐藏的iframe来实现的

要将form标签的target属性设置为iframe的id 当然别忘了将form的enctype设置为multipart/form data

是用来显示上传文件时的进度条

在JS中加入如下处理

此时效果:

二实现文件上传

添加一个一般处理程序命名为UploadFileHandler ashx

lishixinzhi/Article/program/net/201311/14305

以下就以abcupload4为例来说明怎么来制作实时的文件上传进度条。

（注：我们在abcupload自带例子基础上改进。）

progressupload.htm（上传文件的前台提交，我们让进度条在这个里面显示）

<HTML>

<body>

<!--

theUniqueID = (new Date()).getTime() % 1000000000

function s() //让数据提交的同时执行显示进度条的函数

{

bar()//开始执行反映上传情况的函数

document.myform.action = "progressupload.ASP?ID=" theUniqueID//处理上传数据的程序

document.myform.target="up" //将提交的数据放在一个名字是up隐藏的iframe里面处理，这样提交的页面就不会跳转到处理数据的页

document.myform.submit()//提交表单

}

function bar()

{

bar1.style.display=''//让显示上传进度显示的层的可见

var timeoutid=null//这个变量是作定时器的ID

var oXMLDoc = new ActiveXObject('MSXML')//创建'MSXML'对象

sURL = "progressbar.ASP?ID=" theUniqueID "&temp=" Math.random()//获取上传状态数据的地址

oXMLDoc.url = sURL//load数据

var oRoot=oXMLDoc.root//获取返回XML数据的根节点

if(oRoot.children != null)

{

if (oRoot.children.item(0).text-100==0) //文件上传结束就取消定时器

clearTimeout(timeoutid)

PercentDone.style.width=oRoot.children.item(0).text "%"//设置进度条的百分比例

//根据返回的数据在客户端显示

min.innerHTML=oRoot.children.item(1).text//显示剩余时间（分钟）

secs.innerHTML=oRoot.children.item(2).text//显示剩余时间（秒钟）

BytesDone.innerHTML=oRoot.children.item(3).text//已上传数据大小

BytesTotal.innerHTML=oRoot.children.item(4).text//总大小

BytesPerSecond.innerHTML=oRoot.children.item(5).text//传输速率

Information.innerHTML=oRoot.children.item(6).text//上传信息

}

if (oRoot.children.item(0).text-100<0) //只要文件没有传完，就每隔多少时间获取一次数据

timeoutid = setTimeout("bar()",50) //这里设定时间间隔是0.05秒，你也可以根据你的情况修改获取数据时间间隔

}

//-->

</script>

<tr>

</tr>

<td>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<span id=min></span>分

<span id=secs></span>秒

(<span id=BytesDone></span>KB of

</tr>

<tr>

传送速度:</font></td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</div>

</form>

</body>

</HTML>

progressbar.ASP（返回上传状况数据的文件）

<%@EnableSessionState=False%>

On Error Resume Next

Set theProgress = Server.CreateObject("ABCUpload4.XProgress") '创建上传组件对象

theProgress.ID = Request.QueryString("ID")

'将返回数据以XML格式输出

<?XML version="1.0" encoding="gb2312" ?>

<plan>

</plan>

progressupload.ASP（处理上传文件）

<%@EnableSessionState=False%>

Response.Expires = -10000

Server.ScriptTimeOut = 300

Set theForm = Server.CreateObject("ABCUpload4.XForm")

theForm.Overwrite = True

theForm.MaxUploadSize = 8000000

theForm.ID = Request.QueryString("ID")

Set theField = theForm("filefield1")(1)

If theField.FileExists Then

theField.Save theField.FileName

End If

<HTML>

<body>

传送结束

</body>

</HTML>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/11502451.html

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

发表评论

评论列表（0条）