HelloWorld 善戰者,求之于勢,不責于人;故能擇人而任勢。

          知止而后有定,定而后能靜,靜而后能安,安而后能慮,慮而后能得。物有本末,事有終始。知所先后,則近道矣。

            BlogJava :: 首頁 ::  :: 聯系 ::  :: 管理 ::
            167 隨筆 :: 1 文章 :: 40 評論 :: 0 Trackbacks

          JQuery批量上傳插件Uploadify使用詳解及參數說明

          Uploadify是JQuery的一個上傳插件,實現的效果非常不錯,帶進度顯示。官方提供的實例是php版本的,您可以點擊下面的鏈接進行瀏覽或下載。

          效果圖:

            效果圖

           

          部署和代碼介紹:  

          復制代碼
          JSP前臺頁面:

          <script type="text/javascript">
          $(document).ready(
          function() {
          $(
          "#uploadify").uploadify( {//初始化函數

          'uploader' :'uploadify.swf',//flash文件位置,注意路徑
          'script' :'servlet/Upload',//后臺處理的請求
          'cancelImg' :'images/cancel.png',//取消按鈕圖片
          'folder' :'uploads',//您想將文件保存到的路徑
          'queueID' :'fileQueue',//與下面的上傳文件列表id對應
          'queueSizeLimit' :8,//上傳文件的數量
          'scriptData':{'a':'value1','b':'value2'},//向后臺傳的數據
          'fileDesc' :'rar文件或zip文件',//上傳文件類型說明
          'fileExt' :'*.rar;*.zip', //控制可上傳文件的擴展名,啟用本項時需同時聲明fileDesc
          'method':'get',//如果向后臺傳輸數據,必須是get
          'sizeLimit':1000,//文件上傳的大小限制,單位是字節
          'auto' :false,//是否自動上傳
          'multi' :true,
          'simUploadLimit' :2,//同時上傳文件的數量
          'buttonText' :'BROWSE',//瀏覽按鈕圖片
          'onComplete': function(event, queueID, fileObj,serverData,data) {//當上傳完成后的回調函數,ajax方式哦~~
          alert(data.speed);
          }
          });
          });

          </script>



          <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
          <script type="text/javascript" src="js/swfobject.js"></script>
          <script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>

          <div id="fileQueue"></div>
          <input type="file" name="uploadify" id="uploadify" />
          <p>
          <a href="javascript:jQuery('#uploadify').uploadifyUpload()">開始上傳</a>&nbsp;
          <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上傳</a>
          </p>

          java后臺:

          String savePath = this.getServletConfig().getServletContext().getRealPath("");

          savePath = savePath + "/uploads/";

          File f1 = new File(savePath);

          System.out.println(savePath);

          if (!f1.exists()) {

          f1.mkdirs();

          }

          DiskFileItemFactory fac = new DiskFileItemFactory();

          ServletFileUpload upload = new ServletFileUpload(fac);

          upload.setHeaderEncoding("utf-8");

          List fileList = null;

          try {

          fileList = upload.parseRequest(request);

          } catch (FileUploadException ex) {

          ex.printStackTrace();
          return;

          }

          Iterator it = fileList.iterator();

          while (it.hasNext()) {

          FileItem item = (FileItem) it.next();

          if (!item.isFormField()) {

          name = item.getName();

          long size = item.getSize();

          String type = item.getContentType();

          if (name == null || name.trim().equals("")) {

          continue;

          }

          // 擴展名格式:

          if (name.lastIndexOf(".") >= 0) {

          extName = name.substring(name.lastIndexOf("."));

          }

          File file = null;

          do {

          // 生成文件名:

          name = UUID.randomUUID().toString();

          file = new File(savePath + name + extName);

          } while (file.exists());

          File saveFile = new File(savePath + name + extName);

          try {

          item.write(saveFile);

          } catch (Exception e) {

          e.printStackTrace();

          }

          }

          }

          response.getWriter().print(name + extName);

          代碼很好懂,不講解了。
          復制代碼



          下面是官方英文文檔的一些翻譯。此文檔是2.14版本的,現在出了3.0版本,屬性和事件名稱有改變,注意參考JS文件

          Uploadify屬性

          屬性名 類型 說明
          auto boolean 添加到隊列后自動上傳
          buttonImg string 瀏覽按鈕的背景圖片
          buttonText string 瀏覽按鈕的顯示文字
          cancelImg string 取消上傳按鈕的圖片
          checkScript string 服務端用來檢查文件是否重名的腳本
          displayData string 上傳時顯示的提示(percentage百分比/speed速度)
          expressInstall string 安裝swf的文件(expressInstall.swf)路徑
          fileDataName string 重定義的input的名稱(后臺)
          fileDesc string 文件打開對話框中的文件類型描述
          fileExt string 可允許上傳的文件類型
          folder string 文件存儲的文件夾
          height integer 瀏覽按鈕的高度
          hideButton boolean 是否隱藏瀏覽按鈕
          method string 表單提交方式(post/get)
          multi boolean 是否允許上傳多個文件
          queueID string 上傳隊列的元素的ID
          queueSizeLimit integer 上傳隊列大小
          removeCompleted boolean 完成上傳時是否自動刪除
          rollover boolean 當鼠標移上時產生特效
          script string 上傳表單提交的目標腳本
          scriptAccess string swf的文件地址
          scriptData JSON 提交給后臺的附加信息
          simUploadLimit integer 同時可上傳的文件實例數
          sizeLimit integer 每文件的最大大小
          uploader string uploadify上傳的swf文件路徑
          width integer 瀏覽按鈕的寬度
          wmode string flash文件的wmode模式

          Uploadify事件

          事件名 參數 說明
          onAllComplete function(event,data) 當所有文件上傳完畢時觸發
          onCancel function(event,ID,fileObj,data) 當某文件被取消上傳時觸發
          onCheck function() 當開始上傳時檢查是否重名
          onClearQueue function(event) 當執行uploadifyClearQueue()后執行
          onComplete function(event, ID, fileObj, response, data) 當某文件上傳完畢時觸發
          onError function(event,ID,fileObj,errorObj) 當上傳時有錯誤返回時觸發
          onInit function() 當uploadify實例加載完畢時觸發
          onOpen function(event,ID,fileObj) 當某文件開始上傳時觸發
          onProgress function(event,ID,fileObj,data) 當某文件上傳進度改變時觸發
          onQueueFull function(event,queueSizeLimit) 當上傳隊列達到限制時觸發
          onSelect function(event,ID,fileObj) 每個文件被添加到上傳隊列時觸發
          onSelectOnce function(event,data) 一次文件被添加到上傳隊列時觸發
          onSWFReady function() 當flash加載完畢時觸發

          Uploadify方法

          方法名 說明
          .uploadify() 創建Uploadify的實例
          .uploadifyCancel() 從上傳隊列中移除一個文件
          .uploadifyClearQueue() 清空上傳隊列
          .uploadifySettings() 修改Uploadify實例的屬性
          .uploadifyUpload()


          </script>

          posted on 2012-10-24 15:13 helloworld2008 閱讀(6811) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 永昌县| 西乌珠穆沁旗| 凤城市| 安顺市| 元江| 砚山县| 弥勒县| 枞阳县| 延安市| 调兵山市| 湘乡市| 新化县| 西城区| 鄂尔多斯市| 盐山县| 临漳县| 南昌县| 昌邑市| 连州市| 项城市| 永吉县| 华坪县| 通州市| 武川县| 涞源县| 泸水县| 万盛区| 新巴尔虎左旗| 霍州市| 铜川市| 右玉县| 开远市| 隆德县| 溧阳市| 阳江市| 丰顺县| 囊谦县| 靖边县| 那曲县| 玛多县| 洛南县|