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屬性 復制代碼 代碼如下