jquery uploadify 上傳檔案

  網上找了一天，大家都說Uploadify唯一的缺點就是不支援中文按鈕，杯具之前，我看了下Uploadify的API，才發現了幾個參數沒被大家提及的，這正是解決此問題的關鍵。（以後堅決養成沒事就看API的習慣）

    Uploadify有一個參數是 buttonText 這個無論你怎麼改都不支援中文，因為外掛程式在js裡用了一個轉碼方法把這個參數的值轉過碼了，解碼的地方在那個swf檔案裡，看不到代碼，所以這條路不行。

    另一個參數，網上很少提到，是 buttonImg( 按鈕圖片)，這時你完全可以用一個圖片來替換掉外掛程式內建的那個黑色的flash瀏覽按鈕，只要你自己的圖片上是中文，這不就解決了中文按鈕問題嗎？如果只加這一個，你會發現你的按鈕圖片下面有一片白色地區，其實就是那個flash留下的，白色地區表示滑鼠可用範圍，這個範圍可以用width,height來調整。還有一個參數wmode 它的預設值是opaque，把它改成transparent就行了，也就是把那片白色地區透明化。再用剛才說的方法，把按鍵點擊範圍設定成跟你圖片一樣大就完全OK了。
 

    Uploadify的用法就不說了，網上文章很多，跟別的jquery外掛程式用法一樣，就是幾種檔案的擺放路徑而已。

    以下附上Uploadify部分參數的介紹，要看全部的就去看其API檔案了，一般在下載的包裡都有。

 

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 docpdf檔案”，開啟檔案選擇框效果如：

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：選擇檔案到檔案隊列中後的每一個檔案上的關閉按鈕表徵圖

Uploadify還內建了很多參數及有用的方法和回呼函數，都在API裡，雖然是全英文的，但很容易看懂，這裡就不說了。

以下是我用到的代碼，可以參考一下：

<script type="text/javascript">  
$(document).ready(function() {  
$("#uploadify").uploadify({  
'uploader'       :'images/uploadify.swf',  
'script'         :'<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do',  
'cancelImg'      : 'images/cancel.png',  
'folder'         : '/',  
'queueID'        : 'fileQueue',  
'fileDataName'   : 'uploadify',  
'fileDesc'       : '支援格式:xls.',   
'fileExt'        : '*.xls',  
'auto'           :false,  
'multi'          :true,  
'height'         : 20,  
'width'          : 50,  
'simUploadLimit' : 3,  
//'buttonText'     : 'fdsfdsf...',  
'buttonImg'      : 'images/browse.jpg',  
// 'hideButton'     : true,  
// 'rollover'       : true,  
'wmode'          : 'transparent',  
onComplete       : function (event, queueID,fileObj, response, data)  
{   
$('<li></li>').appendTo('.files').text(response);   
},   
onError          : function(event,queueID, fileObj)  
{   
alert("檔案:"+ fileObj.name + " 上傳失敗");   
}   
// onCancel         : function(event,queueID, fileObj)  
// {   
//     alert("取消檔案：" +fileObj.name);   
// }   
});
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader'       : 'images/uploadify.swf',
'script'         :'<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do',
'cancelImg'      : 'images/cancel.png',
'folder'         : '/',
'queueID'        : 'fileQueue',
'fileDataName'   : 'uploadify',
'fileDesc'       : '支援格式:xls.',
'fileExt'        : '*.xls',
'auto'           : false,
'multi'          : true,
'height'         : 20,
'width'          : 50,
'simUploadLimit' : 3,
//'buttonText'     : 'fdsfdsf...',
'buttonImg'      : 'images/browse.jpg',
// 'hideButton'     : true,
// 'rollover'       : true,
'wmode'          : 'transparent' ,
onComplete       : function (event, queueID,fileObj, response, data)
{
$('<li></li>').appendTo('.files').text(response);
},  www.2cto.com
onError          : function(event,queueID, fileObj)
{
alert("檔案:"+ fileObj.name + " 上傳失敗");
}
// onCancel         : function(event,queueID, fileObj)
// {
//     alert("取消檔案：" + fileObj.name);
// }
});

要注意的是，我的script屬性值是一個請求路徑，我發現在我設定了同時上傳多個檔案後(比如3)，並不是每請求一次去上傳3個檔案，而仍然是執行3次請求，請求一次上傳一個檔案。這也沒辦法，uplodify有那麼多回呼函數，要是一次處理多個，那回呼函數的參數就不知道拿哪個了，因為這些參數都不是數組。

也就是說，無論你設定同時上傳幾個檔案，它都會一個一個去請求並上傳，只是表面上感覺好像有多個線程同時在處理上傳請求一樣，只是表象而已。而且如果你把simUploadLimit設定過大就會經常出錯，我設定成5的時候經常會有一兩個檔案上傳失敗。