jQuery AJAX 網頁無刷新上傳示例

時間 2019-11-06

原文原文鏈接

新年禮，提供簡單、易套用的 jQuery AJAX 上傳示例及代碼下載。後臺對文件的上傳及檢查，以 C#/.NET Handler 處理 (可視須要改寫成 Java 或 PHP)。javascript

有時作一個網站項目 (不管是否 ASP.NET)，內附的 FileUpload 控件，功能不足 (頁面必須刷新、不支援 AJAX)，或外觀太醜被用戶嫌棄 (卻沒法透過 CSS 自定義外觀)。網路上雖已有許多可用的示例，如： jQuery File Upload，但功能太強大、外觀複雜，欲僅取出部分功能來引用，反而不易。所以我參考了兩本書上、多個網路上的示例，整合、改寫成此一示例，標榜：功能簡單 (夠用就好)、外觀可自定義 (只用 HTML 的 div、span、input，不被特定廠商的控件綁死)、往後作其餘網站項目都易於使用 (公司其餘程序員，沒必要再改寫一堆 jQuery、JavaScript、CSS)。
---------------------------------------------------------------
WizardWuUpload 上傳文件(圖片)
日期: 2015/02/19
版本: v1.1
---------------------------------------------------------------
示例代碼下載點:css

http://files.cnblogs.com/files/WizardWu/150219.zip
(執行本示例，不用數據庫，但須要 IIS 或 Visual Studio)
---------------------------------------------------------------
執行方式:html

用 Visual Studio 或 IIS 開啓網站，以任一種瀏覽器，執行 SingleUpload.html 或 MultiUpload.html。上傳後的文件(圖片)，存放在 /uploadFiles 文件夾底下。
---------------------------------------------------------------java

圖 1　示例架構jquery

---------------------------------------------------------------git

圖 2　執行畫面 - 單一上傳 & 引用藍色CSS文件程序員

圖 3　執行畫面 - 單一上傳 & 引用綠色CSS文件github

圖 4　執行畫面 - 複數上傳 & 引用銀色CSS文件web

---------------------------------------------------------------
本示例的功能:ajax

* 上傳時用 jQuery 的 AJAX 處理，畫面不會 refresh 刷新 (調用 jQuery Form 的 ajaxSubmit [5]，異步地提交表單)。
* 可自訂「上傳按鈕、進度條」的外觀、引用您想要的 CSS (本示例提供：綠色、藍色、銀色，三種 CSS 文件可引用)。
* 上傳期間，會顯示進度條。
* 上傳完後，會出現預覽圖。
* 上傳完後，會出現「刪除圖片」超鏈接，可以讓用戶刪除剛上傳的圖片。
* 可限制上傳圖片的擴展名、文件大小的上限 (由 C# / WizardWuUpload.ashx 控制)，並會給用戶相關警示信息。
* 外觀上 IE、FireFox、Chrome 都一致 (此點亦爲 jQuery 的特性)。
* .html、.aspx 均可套用此示例。若爲 PHP 或 JSP，需自行改寫 WizardWuUpload.ashx，但沒必要改寫 jQuery。

本示例的特性:

* 講求實用、網站項目中易於套用，而非功能強大、外觀華麗。
* 將 css、jQuery 抽出來成爲獨立的共用文件，方便項目中套用此示例，沒必要每一頁重複撰寫。
* 將頁面上的 DOM 對象(控件) 的 id 特別命名過，方便項目中套用此示例。
---------------------------------------------------------------

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title>無刷新上傳文件 - 頁面只有一個上傳</title>
 5         <!--<link rel="stylesheet" href="css/WizardWuUpload_Blue.css" />-->
 6         <link rel="stylesheet" href="css/WizardWuUpload_Green.css" />
 7         <!--<link rel="stylesheet" href="css/WizardWuUpload_Silver.css" />-->
 8 
 9         <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
10         <script type="text/javascript" src="js/jquery.form.js"></script>
11         <script type="text/javascript" src="js/WizardWuUpload.js"></script>
12         <script type="text/javascript">
13             $(function () {
14                 //傳入的參數，為該 divUploadArea 區塊中，全部 DOM 對象(控件) 的 id 編號，如: divUploadArea一、spanUploadSelect一、WizardWuFileUpload一、...
15                 $(this).loadUploadContent('1'); //載入第一個上傳區塊 divUploadArea1 所須要的 form 及 jQuery 內容
16             });
17         </script>
18 </head>
19 
20 <body>
21     <h2>WizardWu 無刷新上傳文件 - 頁面只有一個上傳</h2>
22     <table>
23         <tr>
24             <td>
25                 <p>只容許上傳 jpg/jpeg/gif/png/bmp 格式的圖片，圖片大小不能超過 1 MB</p>
26 
27                 <div class="UploadArea" id="divUploadArea1">
28                     <div class="UploadButton">
29                         <span id="spanUploadSelect1">選擇文件</span>
30                         <!--上傳用的file控件-->
31                         <input id="WizardWuFileUpload1" type="file" name="此處name可隨便命名，name名稱可重複" />
32                     </div>
33                     <!--顯示加載進度-->
34                     <div class="UploadProgress" id="divUploadProgress1">
35                         <span class="UploadBar" id="spanUploadBar1"></span><span class="UploadPercent" id="spanUploadPercent1">0%</span>
36                     </div>
37                     <!--顯示已經上傳的文件名、上傳成功纔會出現的「刪除圖片」字樣超鏈接、刪除成功纔會出現的「刪除成功」字樣-->
38                     <div class="ShowContentAfterUploadSuccess" id="divShowContentAfterUploadSuccess1"></div>
39                     <!--顯示已經上傳的圖片-->
40                     <div id="divShowImageAfterUploadSuccess1"></div>
41                 </div>
42             </td>
43         </tr>
44     </table>
45 </body>
46 </html>

引用此示例的 html

---------------------------------------------------------------
ASP.NET 內附 FileUpload 控件的問題:

* 上傳時畫面會 refresh 刷新，沒法套用 AJAX / UpdatePanel 相關功能。
* 控件的外觀，被微軟寫死，沒法透過引用 CSS 改變外觀。
* Google Chrome 與 IE、FireFox，不一樣的瀏覽器，外觀上呈現會不一致。
---------------------------------------------------------------
網路上 jQuery File Upload 的問題:

http://blueimp.github.io/jQuery-File-Upload/
* 功能強大、外觀太複雜，想僅取出部分功能，來套用或改寫有難度。
---------------------------------------------------------------
---------------------------------------------------------------
參考資料:

[1] 超實用的jQuery代碼段 (此書第 8-11 節，部分代碼取自 8-12)
http://www.broadview.com.cn/23949

[2] Asp.Net 用 Jquery 和通常處理程序實現無刷新上傳大文件
http://www.cnblogs.com/zhongweiv/archive/2013/04/16/upload_without_refresh.html

[3] HttpPostedFile 類
https://msdn.microsoft.com/zh-cn/library/system.web.httppostedfile%28v=vs.110%29.aspx

[4] HttpFileCollection 類
https://msdn.microsoft.com/zh-cn/library/system.web.httpfilecollection(v=vs.110).aspx

[5] Form Plugin API
http://malsup.com/jquery/form/#api

[6] jQuery 表單插件 ajaxForm, ajaxSubmit 使用詳解
http://blog.snsgou.com/post-146.html[7] 其餘 jQuery 書籍、其餘網路上的文章---------------------------------------------------------------