程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> 關於ASP.NET >> Asp.Net 無刷新文件上傳並顯示進度條的實現方法及思路

Asp.Net 無刷新文件上傳並顯示進度條的實現方法及思路

編輯:關於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

        <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>
    
    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved