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

推荐：Asp.net获取客户端IP常见代码存在的伪造IP问题探讨
如果某个网站是通过下面的代码获取IP，那么我们只要在Header里随意设置HTTP_VIA和X_FORWARDED_FOR，就可以达到伪造IP的目的 在网卡随便一搜: Asp.net 客户端IP 可以搜索到很多页面，提供的代码基本都类似于： 复制代码 代码如下: if (Request.ServerVariables[HTTP_VIA]

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

效果图：

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

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

一、创建Html网页

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>

分享：VS2010 水晶报表的使用方法
在VS2010中新建一个Windows 窗体应用程序项目，在该项目中添加一个水晶报表CrystalReport1.rpt，然后在项目上点击鼠标右键属性，将目标框架改为.Net Framework 4 打开app.config文件，在startup节点一个useLegacyV2RuntimeActivationPolicy=true属性 复制代码 代码如下