快捷導(dǎo)航

詳解jquery uploadify 上傳文件

更新時(shí)間：2013年11月09日 15:05:29 作者：

這篇文章介紹了jquery uploadify 上傳文件，有需要的朋友可以參考一下

網(wǎng)上找了一天，大家都說(shuō)Uploadify唯一的缺點(diǎn)就是不支持中文按鈕，杯具之前，我看了下Uploadify的API，才發(fā)現(xiàn)了幾個(gè)參數(shù)沒(méi)被大家提及的，這正是解決此問(wèn)題的關(guān)鍵。（以后堅(jiān)決養(yǎng)成沒(méi)事就看API的習(xí)慣）
    Uploadify有一個(gè)參數(shù)是 buttonText 這個(gè)無(wú)論你怎么改都不支持中文，因?yàn)椴寮趈s里用了一個(gè)轉(zhuǎn)碼方法把這個(gè)參數(shù)的值轉(zhuǎn)過(guò)碼了，解碼的地方在那個(gè)swf文件里，看不到代碼，所以這條路不行。
    另一個(gè)參數(shù)，網(wǎng)上很少提到，是 buttonImg( 按鈕圖片)，這時(shí)你完全可以用一個(gè)圖片來(lái)替換掉插件自帶的那個(gè)黑色的flash瀏覽按鈕，只要你自己的圖片上是中文，這不就解決了中文按鈕問(wèn)題么？如果只加這一個(gè)，你會(huì)發(fā)現(xiàn)你的按鈕圖片下面有一片白色區(qū)域，其實(shí)就是那個(gè)flash留下的，白色區(qū)域表示鼠標(biāo)可用范圍，這個(gè)范圍可以用width,height來(lái)調(diào)整。還有一個(gè)參數(shù)wmode 它的默認(rèn)值是opaque，把它改成transparent就行了，也就是把那片白色區(qū)域透明化。再用剛才說(shuō)的方法，把按鍵點(diǎn)擊范圍設(shè)置成跟你圖片一樣大就完全OK了。

    Uploadify的用法就不說(shuō)了，網(wǎng)上文章很多，跟別的jquery插件用法一樣，就是幾種文件的擺放路徑而已。
    以下附上Uploadify部分參數(shù)的介紹，要看全部的就去看其API文件了，一般在下載的包里都有。

uploader：uploadify.swf 文件的相對(duì)路徑，該swf文件是一個(gè)帶有文字BROWSE的按鈕，點(diǎn)擊后彈出打開(kāi)文件對(duì)話框，默認(rèn)值：uploadify.swf。
script ：后臺(tái)處理程序的相對(duì)路徑。默認(rèn)值：uploadify.php
checkScript：用來(lái)判斷上傳選擇的文件在服務(wù)器是否存在的后臺(tái)處理程序的相對(duì)路徑
fileDataName：設(shè)置一個(gè)名字，在服務(wù)器處理程序中根據(jù)該名字來(lái)取上傳文件的數(shù)據(jù)。默認(rèn)為Filedata
method ：提交方式Post 或Get 默認(rèn)為Post
scriptAccess：flash腳本文件的訪問(wèn)模式，如果在本地測(cè)試設(shè)置為always，默認(rèn)值：sameDomain
folder ：上傳文件存放的目錄。
queueID ：文件隊(duì)列的ID，該ID與存放文件隊(duì)列的div的ID一致。
queueSizeLimit：當(dāng)允許多文件生成時(shí)，設(shè)置選擇文件的個(gè)數(shù)，默認(rèn)值：999。
multi ：設(shè)置為true時(shí)可以上傳多個(gè)文件。
auto ：設(shè)置為true當(dāng)選擇文件后就直接上傳了，為false需要點(diǎn)擊上傳按鈕才上傳。
fileDesc：這個(gè)屬性值必須設(shè)置fileExt屬性后才有效，用來(lái)設(shè)置選擇文件對(duì)話框中的提示文本，如設(shè)置fileDesc為“請(qǐng)選擇rar docpdf文件”，打開(kāi)文件選擇框效果如下圖：
fileExt ：設(shè)置可以選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit：上傳文件的大小限制。
simUploadLimit：允許同時(shí)上傳的個(gè)數(shù)默認(rèn)值：1 。
buttonText：瀏覽按鈕的文本，默認(rèn)值：BROWSE 。
buttonImg：瀏覽按鈕的圖片的路徑。
hideButton：設(shè)置為true則隱藏瀏覽按鈕的圖片。
rollover：值為true和false，設(shè)置為true時(shí)當(dāng)鼠標(biāo)移到瀏覽按鈕上時(shí)有反轉(zhuǎn)效果。
width ：設(shè)置瀏覽按鈕的寬度，默認(rèn)值：110。
height ：設(shè)置瀏覽按鈕的高度，默認(rèn)值：30。
wmode ：設(shè)置該項(xiàng)為transparent 可以使瀏覽按鈕的flash背景文件透明，并且flash文件會(huì)被置為頁(yè)面的最高層。默認(rèn)值：opaque 。
cancelImg：選擇文件到文件隊(duì)列中后的每一個(gè)文件上的關(guān)閉按鈕圖標(biāo)

Uploadify還自帶了很多參數(shù)及有用的方法和回調(diào)函數(shù)，都在API里，雖然是全英文的，但很容易看懂，這里就不說(shuō)了。
以下是我用到的代碼，可以參考一下：

復(fù)制代碼代碼如下:

<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.th7.cn
onError          : function(event,queueID, fileObj)
{
alert("文件:"+ fileObj.name + " 上傳失敗");
}
// onCancel         : function(event,queueID, fileObj)
// {
//     alert("取消文件：" + fileObj.name);
// }
});

要注意的是，我的script屬性值是一個(gè)請(qǐng)求路徑，我發(fā)現(xiàn)在我設(shè)置了同時(shí)上傳多個(gè)文件后(比如3)，并不是每請(qǐng)求一次去上傳3個(gè)文件，而仍然是執(zhí)行3次請(qǐng)求，請(qǐng)求一次上傳一個(gè)文件。這也沒(méi)辦法，uplodify有那么多回調(diào)函數(shù)，要是一次處理多個(gè)，那回調(diào)函數(shù)的參數(shù)就不知道拿哪個(gè)了，因?yàn)檫@些參數(shù)都不是數(shù)組。
也就是說(shuō)，無(wú)論你設(shè)置同時(shí)上傳幾個(gè)文件，它都會(huì)一個(gè)一個(gè)去請(qǐng)求并上傳，只是表面上感覺(jué)好像有多個(gè)線程同時(shí)在處理上傳請(qǐng)求一樣，只是表象而已。而且如果你把simUploadLimit設(shè)置過(guò)大就會(huì)經(jīng)常出錯(cuò)，我設(shè)置成5的時(shí)候經(jīng)常會(huì)有一兩個(gè)文件上傳失敗。

您可能感興趣的文章: