JQuery檔案上傳外掛Uploadify
摘要：
Uploadify是JQuery的一個上傳外掛，實現的效果非常不錯，帶進度顯示.(我的資源中有Demo)
用到的檔案：
js檔案:jquery.uploadify-v2.1.0(資料夾)，位置不限
一般處理介面：UploadHandler.ashx，根目錄
下載圖片資料夾：UploadFile，根目錄
cs檔案：default.css
屬性介紹：
uploader ： uploadify.swf 檔案的相對路徑，該swf檔案是一個帶有文字BROWSE的按鈕，點選後淡出開啟檔案對話方塊，預設值：uploadify.swf。
script ： 後臺處理程式的相對路徑 。預設值：
checkScript ：用來判斷上傳選擇的檔案在伺服器是否存在的後臺處理程式的相對路徑
fileDataName ：設定一個名字，在伺服器處理程式中根據該名字來取上傳檔案的資料。預設為Filedata
method ： 提交方式Post 或Get 預設為Post
scriptAccess ：flash指令碼檔案的訪問模式，如果在本地測試設定為always，預設值：sameDomain
folder ： 上傳檔案存放的目錄 。
queueID ： 檔案佇列的ID，該ID與存放檔案佇列的div的ID一致。
queueSizeLimit ： 當允許多檔案生成時，設定選擇檔案的個數，預設值：
multi ： 設定為true時可以上傳多個檔案。
auto ： 設定為true當選擇檔案後就直接上傳了，為false需要點選上傳按鈕才上傳 。
fileDesc ： 這個屬性值必須設定fileExt屬性後才有效，用來設定選擇檔案對話方塊中的提示文字，如設定fileDesc為“請選擇rar doc pdf檔案”
fileExt ： 設定可以選擇的檔案的型別，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上傳檔案的大小限制 。
simUploadLimit ： 允許同時上傳的個數 預設值：1 。
buttonText ： 瀏覽按鈕的文字，預設值：
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個屬性。
程式碼：
前臺：
先做一個[上傳按鈕]
作用:
是顯示出上傳介面層：
<input type="button" onclick="openWindow()" class="btn_upload" />
再做一個層：
作用：
是使用者上傳的時候不能點選主頁面，可以放在form上面。
<div class="full_dark" id="full_dark" style="display: none">
</div>
最後做[上傳介面]：
<div style="position: relative;">
<div class="imgLoad2" style="display: none">
<div id="fileQueue">
</div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()" class="btn1">上傳</a><span class="null1">
</span><a href="#" onclick="colseWindow()" class="btn2">取消</a>
</p>
</div>
</div>
js程式碼：
//圖示上傳
$("#uploadify").uploadify({
'uploader': '../JS/jquery.uploadify-v2.1.0/uploadify.swf',
'script': '../UploadHandler.ashx',
'cancelImg': '../JS/jquery.uploadify-v2.1.0/cancel.png',
'folder': '../UploadFile',
'queueID': 'fileQueue',
'fileDesc': "請選擇png或者jpg格式圖片",
'fileExt': "*.jpg;*.png",
// 'buttonImg': "../images/upload2.png",
'auto': false,
'buttonText': "瀏 覽",
'multi': false,
'onComplete': function (event, queueID, fileObj, response, data) {
//把上傳圖示的地址存到session
$.ajax({
type: "POST",
//dataType:"Text",
url: "ashxs/setSession.ashx",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: { key: "uploadIconUrl", value: "http://220.249.104.50:8083/UploadFile/" + fileObj.name },
success: function (msg) {
if (msg != "N") {
//上次圖示後把勾上的系統圖標隱藏
$(".checks").hide();
$("#imgUpload").attr("src", msg);
// alert("圖片：" + fileObj.name + "，上傳成功");
}
}
});
$("#full_dark").hide();
$(".imgLoad2").hide();
},
'onError': function (event, queueID, fileObj, errorObj) {
if (fileObj.size > "5271521") {
alert("請上傳5M以下的圖片");
}
}
});
增加的js：
//隱藏上傳圖片的層
function colseWindow() {
$("#full_dark").hide();
$(".imgLoad").hide();
$(".imgLoad2").hide();
}
//顯示上傳圖片的層
function openWindow() {
$("#full_dark").show();
$(".imgLoad").show();
$(".imgLoad2").show();
}
操作流程邏輯：
點選上傳按鈕後促發openWindow事件，彈出上傳的層（class="imgLoad2"）,選擇圖片後點擊確定上傳（id="uploadify")，上傳完成。