標籤：des style blog http color java 使用 os
在做日常項目中，經常在後台需要上傳圖片等資源檔，之前使用過幾次這個組件，感覺非常好用 ，但是每次使用的時候都是需要經過一番查閱，所以還不如記住在這裡，以後使用的時候就翻翻。
他的官方網站如下：http://www.uploadify.com/
外掛程式：http://www.uploadify.com/download
說明文檔：http://www.uploadify.com/documentation
在此之前，先說明下外掛程式使用流程，該外掛程式是基於jQuery的，所以我們在使用之前需要引用jquery， 那麼可以想象，外掛程式的作用就在於在前台將資料提交到後台，讓我們通過後台代碼來儲存前台傳入的檔案。所以對於比如說圖片的儲存、加浮水印、等比例壓縮就不屬於此範疇了，不過我打算一起記錄下。
首先按下面的步驟來實現一個簡單的上傳功能。
1 建立Web項目，命名為JQueryUploadDemo，從官網上下載最新的版本解壓後添加到項目中。
2 在項目中添加UploadHandler.ashx檔案用來處理檔案的上傳。
3 在項目中添加UploadFile檔案夾，用來存放上傳的檔案。
根據下引用的路徑，應該能知道具體的結構圖是怎麼樣的。
4 Default.aspx的html頁的代碼修改如下,該檔案可以認為是一個公用的圖片上傳頁面，到時通過使用iframe嵌入到需要用到上傳的頁面中就行：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>批量上傳</title> <link rel="Stylesheet" href="css/uploadify.css" /> <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="Scripts/jquery.uploadify.min.js"></script> <script type="text/javascript" src="Scripts/swfobject.js"></script> <script type="text/javascript"> $(function () { var space = "<%=space %>"; $(‘#custom_file_upload‘).uploadify({ ‘uploader‘: ‘Scripts/uploadify.swf‘, ‘script‘: ‘ashx/Upload.ashx‘, ‘scriptData‘: { "type":"<%=type %>"}, ‘cancelImg‘: ‘images/uploadify-cancel.png‘, ‘folder‘: ‘/Upload‘, ‘multi‘: <%=multi %>, ‘auto‘: false, ‘fileExt‘: ‘*.jpg;*jpeg;*.gif;*.png;*.mp4‘, ‘fileDesc‘: ‘圖片檔案 (.JPG, .JPEG, .GIF, .PNG)‘, ‘queueID‘: ‘custom-queue‘, ‘queueSizeLimit‘: 10, ‘simUploadLimit‘: 10, ‘buttonText‘: ‘選擇檔案‘, //‘buttonImg‘: ‘/Scripts/uploadify-cancel.png‘, ‘removeCompleted‘: true, ‘onSelectOnce‘: function (event, data) { $(‘#status-message‘).text(data.filesSelected + ‘ 個檔案加入上傳隊列‘); }, ‘onClearQueue‘: function (event, data) { $(‘#status-message‘).text(‘請選擇要上傳的檔案:‘); }, ‘onComplete‘: function (event, queueId, fileObj, response, data) { //alert(response.split(‘|‘)[1]); //這裡擷取上傳後的URL路徑，用來在前台顯示 window.parent.document.getElementById(‘<%=file_id %>‘).value += response.split(‘|‘)[1] + space; }, ‘onAllComplete‘: function (event, data) { $(‘#status-message‘).text(data.filesUploaded + ‘ 個檔案已上傳‘); } }); $("#Up").click(function () { if ($("#custom-queue").html() == "") { alert("請選擇要上傳的檔案"); } else { window.parent.document.getElementById(‘<%=file_id %>‘).value = ""; $(‘#custom_file_upload‘).uploadifyUpload(null, false); //一個一個傳 //$(‘#custom_file_upload‘).uploadifyUpload(null, true);//同時傳 } }); $("#Clear").click(function () { $(‘#custom_file_upload‘).uploadifyClearQueue(); }); }); </script> <style type="text/css"> body{font-size:14px; font-family:微軟雅黑;} #custom-demo .uploadifyQueueItem { background-color: #FFFFFF; border: none; border-bottom: 1px solid #E5E5E5; font: 11px Verdana, Geneva, sans-serif; height: 20px; margin-top: 0; padding: 10px; width: 350px; } #custom-demo #custom-queue { border: 1px solid #E5E5E5; margin-bottom: 10px; width: 370px; } #custom-demo object{ float:left; } .button{ float:right; width:120px; height:30px; background-color:#525252; color:#fff; border:0; font-size:14px; font-family:微軟雅黑; cursor:pointer; margin-right:10px; _margin-right:7px; } </style></head><body> <div id="custom-demo" class="demo"> <div class="demo-box"> <div id="status-message">請選擇要上傳的檔案:</div> <div id="custom-queue"></div> <input id="custom_file_upload" type="file" name="Filedata" class="button" /> <input type="button" id="Up" name="Up" value="上傳" class="button" /> <input type="button" id="Clear" name="Clear" value="清空" class="button" /> </div> </div></body></html>
這上面有幾個後台傳入的參數，分別是
string file_id = "";//插入路徑ID
int type = -1;//根據type選擇相應尺寸
string multi = "";//是否選擇多個圖片
string space = "";//多個圖片時候間隔符
5 UploadHandler類的ProcessRequest方法代碼如下：
public void ProcessRequest(HttpContext context) { int type = HRSiteRequest.GetFormInt("type", 0); ImgUpUtils up = new ImgUpUtils(); context.Response.Write(up.uploadPic(context.Request.Files, "FileData", CommonUt.Config.getUploadImgConfig(type))); }上面的ImgUpUtils就是上面提到的一個圖片等比例壓縮的處理類，up.uploadPic(string arg1,string arg2)該方法就是返回圖片儲存後的圖片路徑，
一般而言，資料庫中都是存放圖片路徑的， 在網頁中顯示的時候，通過對圖片的src的拼接，就可以得到一個網站的圖片URL。然後通過上面的default.aspx頁面中的js我們可以看到，實際上js通過非同步上傳後返回的這個url，將它放到了圖片的文字框中， 最後提交資料的時候， 該路徑就被存放到了資料庫中， 具體的就是這麼個思路。那麼看看頁面實際啟動並執行實際圖吧。
6 運行後效果如：
7.運行完後，填充到文字框中：
最後提交整個表單的時候， 圖片的url就被存放到了資料庫中。
8 選擇了兩個檔案後，點擊上傳，就可以看到UploadFile檔案夾中會增加這兩個檔案。
上面簡單地實現了一個上傳的功能，依靠函數uploadify實現，uploadify函數的參數為json格式，可以對json對象的key值的修改來進行自訂的設定，如multi設定為true或false來控制是否可以進行多檔案上傳，下面就來介紹下這些key值的意思：
uploader ： uploadify.swf 檔案的相對路徑，該swf檔案是一個帶有文字BROWSE的按鈕，點擊後淡出開啟檔案對話方塊，預設值：uploadify.swf。
script ： 幕後處理程式的相對路徑 。預設值：uploadify.php
checkScript ：用來判斷上傳選擇的檔案在伺服器是否存在的幕後處理程式的相對路徑
fileDataName ：設定一個名字，在伺服器處理常式中根據該名字來取上傳檔案的資料。預設為Filedata
method ： 提交方式Post 或Get 預設為Post
scriptAccess ：flash指令檔的訪問模式，如果在本地測試設定為always，預設值：sameDomain
folder ： 上傳檔案存放的目錄 。
queueID ： 檔案隊列的ID，該ID與存放檔案隊列的div的ID一致。
queueSizeLimit ： 當允許多檔案產生時，設定選擇檔案的個數，預設值：999 。
multi ： 設定為true時可以上傳多個檔案。
auto ： 設定為true當選擇檔案後就直接上傳了，為false需要點擊上傳按鈕才上傳 。
fileDesc ： 這個屬性值必須設定fileExt屬性後才有效，用來設定選擇檔案對話方塊中的提示文本，如設定fileDesc為“請選擇rar doc pdf檔案
fileExt ： 設定可以選擇的檔案的類型，格式如：‘*.doc;*.pdf;*.rar‘ 。
sizeLimit ： 上傳檔案的大小限制 。
simUploadLimit ： 允許同時上傳的個數 預設值：1 。
buttonText ： 瀏覽按鈕的文本，預設值：BROWSE 。
buttonImg ： 瀏覽按鈕的圖片的路徑 。
hideButton ： 設定為true則隱藏瀏覽按鈕的圖片 。
rollover ： 值為true和false，設定為true時當滑鼠移到瀏覽按鈕上時有反轉效果。
width ： 設定瀏覽按鈕的寬度 ，預設值：110。
height ： 設定瀏覽按鈕的高度 ，預設值：30。
wmode ： 設定該項為transparent 可以使瀏覽按鈕的flash背景檔案透明，並且flash檔案會被置為頁面的最高層。 預設值：opaque 。
cancelImg ：選擇檔案到檔案隊列中後的每一個檔案上的關閉按鈕表徵圖，
上面介紹的key值的value都為字串或是布爾類型，比較簡單，接下來要介紹的key值的value為一個函數，可以在選擇檔案、出錯或其他一些操作的時候返回一些資訊給使用者。
onInit : 做一些初始化的工作。
onSelect ：選擇檔案時觸發，該函數有三個參數
event:事件對象。
queueID：檔案的唯一標識，由6為隨機字元組成。
fileObj：選擇的檔案對象，有name、size、creationDate、modificationDate、type 5個屬性。onSelectOnce ：在單檔案或多檔案上傳時，選擇檔案時觸發。該函數有兩個參數event，data，data對象有以下幾個屬性：
onCancel : 當點擊檔案隊列中檔案的關閉按鈕或點擊取消上傳時觸發。該函數有event、queueId、fileObj、data四個參數，前三個參數同onSelect 中的三個參數，data對象有兩個屬性fileCount和allBytesTotal。
onClearQueue ：當調用函數fileUploadClearQueue時觸發。有event和data兩個參數，同onCancel 中的兩個對應參數。
onQueueFull ：當設定了queueSizeLimit並且選擇的檔案個數超出了queueSizeLimit的值時觸發。該函數有兩個參數event和queueSizeLimit。
onError ：當上傳過程中發生錯誤時觸發。該函數有event、queueId、fileObj、errorObj四個參數，其中前三個參數同上，errorObj對象有type和info兩個屬性。
onOpen ：點擊上傳時觸發，如果auto設定為true則是選擇檔案時觸發，如果有多個檔案上傳則遍曆整個檔案隊列。該函數有event、queueId、fileObj三個參數，參數的解釋同上。
onProgress ：點擊上傳時觸發，如果auto設定為true則是選擇檔案時觸發，如果有多個檔案上傳則遍曆整個檔案隊列，在onOpen之後觸發。該函數有event、queueId、fileObj、data四個參數，前三個參數的解釋同上。data對象有四個屬性percentage、bytesLoaded、allBytesLoaded、speed：
onComplete：檔案上傳完成後觸發。該函數有四個參數event、queueId、fileObj、response、data五個參數，前三個參數同上。response為幕後處理程式返回的值，在上面的例子中為1或0，data有兩個屬性fileCount和speed
註：fileObj對象和上面講到的有些不太一樣，onComplete 的fileObj對象有個filePath屬性可以取出上傳檔案的路徑。
onAllComplete：檔案隊列中所有的檔案上傳完成後觸發。該函數有event和data兩個參數，data有四個屬性，分別為：
相關函數介紹
在上面的例子中已經用了uploadifyUpload和uploadifyClearQueue兩個函數，除此之外還有幾個函數：
uploadifySettings：可以動態修改上面介紹的那些key值，如下面代碼
$(‘#uploadify‘).uploadifySettings(‘folder‘,‘JS‘);
如果上傳按鈕的事件寫成下面這樣，檔案將會上傳到uploadifySettings定義的目錄中
<a href="javascript:$(‘#uploadify‘).uploadifySettings(‘folder‘,‘JS‘);
$(‘#uploadify‘).uploadifyUpload()">上傳</a>
uploadifyCancel：該函數接受一個queueID作為參數，可以取消檔案隊列中指定queueID的檔案。
$(‘#uploadify‘).uploadifyCancel(id);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
