相信通过AspNet的服务器控件上传文件在简单不过了通过AjaxToolkit控件实现上传进度也不是什么难事为什么还要自己辛辛苦苦来 实现呢？我并不否认”拿来主义“只是我个人更喜欢凡是求个所以然本篇将阐述通过HtmlIHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理希望对你有多帮助
效果图
本文涉及到的知识点
前台用到HtmlAjaxJQueryJQuery UI
后台用到一般处理程序(IHttpHandler)和一般异步处理程序(IHttpAsyncHandler)并涉及到”推模式“
一创建Html网页在创建的Web工程中添加一个Html文件命名为UploadFilehtm在头文件中引入JQueryJQuery UI
<link href="Styles/jqueryuicustomcss" rel="stylesheet" type="text/css" /> <script src="Scripts/jqueryminjs" type="text/javascript"></script> <script src="Scripts/jqueryuicustomminjs" type="text/javascript"></script>
关于无刷新文件上传
通过Ajax是不能上传文件的无刷新上传是靠隐藏的iframe来实现的
<form id="form" target = "frameFileUpload" enctype="multipart/formdata"><div id="progressBar" style="fontsize: em;"></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/formdata
<div id="progressBar" style="fontsize: em;"></div>
是用来显示上传文件时的进度条
在JS中加入如下处理
<script type="text/javascript"> $(function () { $("#submit")button(); $("#fileUpload")button(); }); </script>
此时效果:
二实现文件上传添加一个一般处理程序命名为UploadFileHandlerashx
public void ProcessRequest(HttpContext context) { //如果提交的文件名是空则不处理 if (contextRequestFilesCount == || stringIsNullOrWhiteSpace(contextRequestFiles[]FileName)) return; //获取文件流 Stream stream = contextRequestFiles[]InputStream; //获取文件名称 string fileName = PathGetFileName(contextRequestFiles[<SPA< td>
