新年禮，提供簡單、易套用的 jQuery AJAX 上傳示例及代碼下載。后臺對文件的上傳及檢查，以 C#/.NET Handler 處理 (可視需要改寫成 Java 或 PHP)。
有時做一個網(wǎng)站項(xiàng)目 (不論是否 ASP.NET)，內(nèi)附的 FileUpload 控件，功能不足 (頁面必須刷新、不支援 AJAX)，或外觀太丑被用戶嫌棄 (卻無法透過 CSS 自定義外觀)。網(wǎng)路上雖已有許多可用的示例，如： jQuery File Upload，但功能太強(qiáng)大、外觀復(fù)雜，欲僅取出部分功能來引用，反而不易。因此我參考了兩本書上、多個網(wǎng)路上的示例，整合、改寫成此一示例，標(biāo)榜：功能簡單 (夠用就好)、外觀可自定義 (只用 HTML 的 div、span、input，不被特定廠商的控件綁死)、日后做其他網(wǎng)站項(xiàng)目都易于使用 (公司其他程序員，不必再改寫一堆 jQuery、JavaScript、CSS)。
---------------------------------------------------------------
WizardWuUpload 上傳文件(圖片)
日期: 2015/02/19
版本: v1.1
---------------------------------------------------------------
示例代碼下載點(diǎn):
https://files.cnblogs.com/files/WizardWu/150219.zip
(執(zhí)行本示例，不用數(shù)據(jù)庫，但需要 IIS 或 Visual Studio)
---------------------------------------------------------------
執(zhí)行方式:
用 Visual Studio 或 IIS 開啟網(wǎng)站，以任一種瀏覽器，執(zhí)行 SingleUpload.html 或 MultiUpload.html。上傳后的文件(圖片)，存放在 /uploadFiles 文件夾底下。
---------------------------------------------------------------
圖 1 示例架構(gòu)
---------------------------------------------------------------
圖 2 執(zhí)行畫面 - 單一上傳 & 引用藍(lán)色CSS文件
圖 3 執(zhí)行畫面 - 單一上傳 & 引用綠色CSS文件
圖 4 執(zhí)行畫面 - 復(fù)數(shù)上傳 & 引用銀色CSS文件
---------------------------------------------------------------
本示例的功能:
* 上傳時用 jQuery 的 AJAX 處理，畫面不會 refresh 刷新 (調(diào)用 jQuery Form 的 ajaxSubmit [5]，異步地提交表單)。
* 可自訂「上傳按鈕、進(jìn)度條」的外觀、引用您想要的 CSS (本示例提供：綠色、藍(lán)色、銀色，三種 CSS 文件可引用)。
* 上傳期間，會顯示進(jìn)度條。
* 上傳完后，會出現(xiàn)預(yù)覽圖。
* 上傳完后，會出現(xiàn)「刪除圖片」超連接，可讓用戶刪除剛上傳的圖片。
* 可限制上傳圖片的擴(kuò)展名、文件大小的上限 (由 C# / WizardWuUpload.ashx 控制)，并會給用戶相關(guān)警示信息。
* 外觀上 IE、FireFox、Chrome 都一致 (此點(diǎn)亦為 jQuery 的特性)。
* .html、.aspx 都可套用此示例。若為 PHP 或 JSP，需自行改寫 WizardWuUpload.ashx，但不必改寫 jQuery。
本示例的特性:
* 講求實(shí)用、網(wǎng)站項(xiàng)目中易于套用，而非功能強(qiáng)大、外觀華麗。
* 將 css、jQuery 抽出來成為獨(dú)立的共用文件，方便項(xiàng)目中套用此示例，不必每一頁重復(fù)撰寫。
* 將頁面上的 DOM 對象(控件) 的 id 特別命名過，方便項(xiàng)目中套用此示例。
---------------------------------------------------------------
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 //傳入的參數(shù)，為該 divUploadArea 區(qū)塊中，所有 DOM 對象(控件) 的 id 編號，如: divUploadArea1、spanUploadSelect1、WizardWuFileUpload1、... 15 $(this).loadUploadContent('1'); //載入第一個上傳區(qū)塊 divUploadArea1 所需要的 form 及 jQuery 內(nèi)容 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名稱可重復(fù)" /> 32 </div> 33 <!--顯示加載進(jìn)度--> 34 <div class="UploadProgress" id="divUploadProgress1"> 35 <span class="UploadBar" id="spanUploadBar1"></span><span class="UploadPercent" id="spanUploadPercent1">0%</span> 36 </div> 37 <!--顯示已經(jīng)上傳的文件名、上傳成功才會出現(xiàn)的「刪除圖片」字樣超連接、刪除成功才會出現(xiàn)的「刪除成功」字樣--> 38 <div class="ShowContentAfterUploadSuccess" id="divShowContentAfterUploadSuccess1"></div> 39 <!--顯示已經(jīng)上傳的圖片--> 40 <div id="divShowImageAfterUploadSuccess1"></div> 41 </div> 42 </td> 43 </tr> 44 </table> 45 </body> 46 </html>
---------------------------------------------------------------
ASP.NET 內(nèi)附 FileUpload 控件的問題:
* 上傳時畫面會 refresh 刷新，無法套用 AJAX / UpdatePanel 相關(guān)功能。
* 控件的外觀，被微軟寫死，無法透過引用 CSS 改變外觀。
* Google Chrome 與 IE、FireFox，不同的瀏覽器，外觀上呈現(xiàn)會不一致。
---------------------------------------------------------------
網(wǎng)路上 jQuery File Upload 的問題:
http://blueimp.github.io/jQuery-File-Upload/
* 功能強(qiáng)大、外觀太復(fù)雜，想僅取出部分功能，來套用或改寫有難度。
---------------------------------------------------------------
---------------------------------------------------------------
參考資料:
[1] 超實(shí)用的jQuery代碼段 (此書第 8-11 節(jié)，部分代碼取自 8-12)
http://www.broadview.com.cn/23949
[2] Asp.Net 用 Jquery 和一般處理程序?qū)崿F(xiàn)無刷新上傳大文件
http://www.rzrgm.cn/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 書籍、其他網(wǎng)路上的文章
---------------------------------------------------------------
浙公網(wǎng)安備 33010602011771號