1、JqUploader介紹
JqUploader是一個Jquery的插件，采用基於Flash的方式為Html的上傳文件input file添加了有百分比顯示的進度條，來提高整個頁面的用戶體驗。當然它的使用也是相當簡便，只要在頁面中引入jquery.flash.js，jquery.jqUploader.js及jquery的js文件就能使用，同時也繼承了JQuery的兼容各種瀏覽器的優點。
官方提供下載：http://www.pixeline.be/experiments/jqUploader/
使用參考文檔：http://www.pixeline.be/experiments/jqUploader/doc.php
2、JqUploader的使用實例
實例環境：ASP.Net MVC 2.0
首先是我們建立Index.aspx視圖，就我們實驗的上傳界面。
1: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">3:4: <html xmlns="http://www.w3.org/1999/xhtml" >5: <head runat="server">6: <title>Index</title>7: <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>1:2: <script src="../../Scripts/jquery.flash.js" type="text/javascript">1: </script>2: <script src="../../Scripts/jquery.jqUploader.js" type="text/javascript">1: </script>2: <script type="text/javascript">3: $(document).ready(function () {4:5: $("#file1").jqUploader({6: background: "FFFFFF",7: barColor: "555555",8: allowedExt: "*",9: hideSubmit: true,10: allowedExtDescr:"Images (*.jpg; *.jpeg; *.png)"11: });12: })13:</script>8: </head>9: <body>10: <div>11: <h2>JQuery Plugins JqUploader Test</h2>12: <%1: Html.BeginForm("upfile", "Test", FormMethod.Post, new { enctype = "multipart/form-data" });%>13: <input id="file1" type="file" name="file1" />14: <%1: Html.EndForm();%>15: </div>16: </body>17: </html>
在引入所需js文件后，我們就可利用jqUploader()方法簡單的定制界面顯示，其中為了提供了22個屬性供我們設置自定義，已達到想要的效果。這些屬性詳細介紹如下：
maxFileSize ：被用來限制上傳文件的大小，默認情況下是不做限制。注意：由於此插件基於Flash實現，Flash Player限制最大100M； width: Flash文件上傳界面的寬度，默認為‘320’； height: Flash文件上傳界面的高度，默認為‘85’； version: 支持的最低的Flash版本，默認為Flash 8.所以建議不要設置在8以下版本； background: 這個界面的背景色，默認為白色(‘FFFFFF’); hideSubmit: 此屬性使用來告訴瀏覽器是否顯示表單的提交按鈕，默認為true； cls: 用這個屬性來給上傳控件添加class，默認為jqUploader； src: Flash文件的路徑，默認為jqUploader.swf，即網站根目錄下； uploadScript: 服務器端用於處理上傳的腳本文件路徑，默認情況下，就是Form的Action的值； afterScript：上傳完成之后，頁面重定向到此頁，也是個可選項； varName： 用於生成文本框的Name屬性，一般不用這個； allowedExt：限制上傳文件的格式，默認為“*.jpg; *.jpeg; *.png”； allowedExtDescr：這個描述將顯示在你的瀏覽的文件格式限制下拉框中，默認為"Images (*.jpg; *.jpeg; *.png)" ； flashvars：可以給Flash文件傳遞一些變量，默認為空，格式為{foo:”bar”}； elementType：Flash的容器，默認為一個div； barcolor：進度條的背景色，默認為‘0000CC’； startMessage：歡迎信息； errorSizeMessage：這個信息用來顯示選擇的文件大小超出限制的提示信息； validFileMessage：這個信息用於文件的驗證和邀請用戶上傳的信息； progressMessage：文件上傳中的提示信息，默認Please wait, uploading； endMessage: 上傳完成后的提示信息。