首頁 >web前端 >js教程 >詳解jquery uploadify 上傳檔案_javascript技巧

詳解jquery uploadify 上傳檔案_javascript技巧

WBOY
WBOY原創
2016-05-16 17:16:38887瀏覽

網路找了一天,大家都說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裡,雖然是全英文的,但很容易看懂,這裡就不說了。
以下是我用到的程式碼,可以參考一下:

複製程式碼 程式碼如下: