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的時候經常會有一兩個文件上傳失敗。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM