Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
来源:
中文源码网 浏览:228 次 日期:2024-05-02 04:05:27
【下载文档: Asp.Net 无刷新文件上传并显示进度条的实现方法及思路.txt 】
Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以然。本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助。
效果图:
本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI
2.后台用到一般处理程序(IHttpHandler)和一般异步处理程序(IHttpAsyncHandler),并涉及到”推模式“
一、创建Html网页1、在创建的Web工程中添加一个Html文件,命名为UploadFile.htm,在头文件中引入JQuery,JQuery UI复制代码 代码如下:
2、关于无刷新文件上传
通过Ajax是不能上传文件的,无刷新上传是靠隐藏的iframe来实现的复制代码 代码如下:
要将form标签的target属性设置为iframe的id,当然别忘了将form的enctype设置为multipart/form-data复制代码 代码如下:
是用来显示上传文件时的进度条
在JS中加入如下处理:复制代码 代码如下: 此时效果:
二、实现文件上传添加一个一般处理程序,命名为UploadFileHandler.ashx复制代码 代码如下: public void ProcessRequest(HttpContext context) { //如果提交的文件名是空,则不处理 if (context.Request.Files.Count == 0 || string.IsNullOrWhiteSpace(context.Request.Files[0].FileName)) return; //获取文件流 Stream stream = context.Request.Files[0].InputStream; //获取文件名称 string fileName = Path.GetFileName(context.Request.Files[0].FileName); //声明字节数组 byte[] buffer; //为什么是4096呢?这是操作系统中最小的分配空间,如果你的文件只有100个字节,其实它占用的空间是4096个字节 int bufferSize = 4096; //获取上传文件流的总长度 long totalLength = stream.Length; //已经写入的字节数,用于做上传的百分比 long writtenSize = 0; //创建文件 using (FileStream fs = new FileStream(@"C:\" + fileName, FileMode.Create, FileAccess.Write)) { //如果写入文件的字节数小于上传的总字节数,就一直写,直到写完为止 while (writtenSize < totalLength) { //如果剩余的字节数不小于最小分配空间 if (totalLength - writtenSize >= bufferSize) { //用最小分配空间创建新的字节数组 buffer = new byte[bufferSize]; } else //用剩余的字节数创建字节数组 buffer = new byte[totalLength - writtenSize]; //读取上传的文件到字节数组 stream.Read(buffer, 0, buffer.Length); //将读取的字节数组写入到新建的文件流中 fs.Write(buffer, 0, buffer.Length); //增加写入的字节数 writtenSize += buffer.Length; //计算当前上传文件的百分比 long percent = writtenSize * 100 / totalLength; } } }在form中添加action和method属性,修改之后的复制代码 代码如下: