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

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

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

[javascript]  view plain copy print ?

1. <script type="text/javascript">  
2. $(document).ready(function() {  
3.   $("#uploadify").uploadify({  
4.     'uploader'       : 'images/uploadify.swf',  
5.     'script'         : '<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do',  
6.     'cancelImg'      : 'images/cancel.png',  
7.     'folder'         : '/',  
8.     'queueID'        : 'fileQueue',  
9.     'fileDataName'   : 'uploadify',  
10.     'fileDesc'       : '支援格式:xls.',   
11.     'fileExt'        : '*.xls',  
12.     'auto'           : false,  
13.     'multi'          : true,  
14.     'height'         : 20,  
15.     'width'          : 50,  
16.     'simUploadLimit' : 3,  
17.    //'buttonText'     : 'fdsfdsf...',  
18.     'buttonImg'      : 'images/browse.jpg',  
19.    // 'hideButton'     : true,  
20.    // 'rollover'       : true,  
21.     'wmode'          : 'transparent' ,  
22.     onComplete       : function (event, queueID, fileObj, response, data)  
23.      {   
24.       $('<li></li>').appendTo('.files').text(response);   
25.      },   
26.     onError          : function(event, queueID, fileObj)  
27.      {   
28.        alert("檔案:" + fileObj.name + " 上傳失敗");   
29.      }   
30.   //  onCancel         : function(event, queueID, fileObj)  
31.   //  {   
32.   //     alert("取消檔案：" + fileObj.name);   
33.   //  }   
34.    });  

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

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