相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以然。本篇将阐述通过Html,IHttpHandler和IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助。
效果图:
本文涉及到的知识点:
1.前台用到Html,Ajax,JQuery,JQuery UI
2.后台用到一般处理程序(IHttpHandler)和一般异步处理程序(IHttpAsyncHandler),并涉及到”推模式“
1、在创建的Web工程中添加一个Html文件,命名为UploadFile.htm,在头文件中引入JQuery,JQuery UI
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /><script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script><script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
2、关于无刷新文件上传
通过Ajax是不能上传文件的,无刷新上传是靠隐藏的iframe来实现的
<form id="form" target = "frameFileUpload" enctype="multipart/form-data"> <div id="progressBar" style="font-size: 1em;"></div> <input type="file" id="fileUpload" name="fileUpload" /><span id="progressValue"></span> <iframe id="frameFileUpload" name="frameFileUpload" style="display:none;" ></iframe> <br /> <input type="submit" value="上传" id = "submit"/> </form>
要将form标签的target属性设置为iframe的id,当然别忘了将form的enctype设置为multipart/form-data
<div id="progressBar" style="font-size: 1em;"></div>
是用来显示上传文件时的进度条
在JS中加入如下处理:
<script type="text/javascript">$(function () {$("#submit").button();$("#fileUpload").button();});</script>
此时效果:
添加一个一般处理程序,命名为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<SPA< td>
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态