HelloWorld 善戰(zhàn)者,求之于勢,不責(zé)于人;故能擇人而任勢。

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

            BlogJava :: 首頁 ::  :: 聯(lián)系 ::  :: 管理 ::
            167 隨筆 :: 1 文章 :: 40 評論 :: 0 Trackbacks
          <2012年10月>
          30123456
          78910111213
          14151617181920
          21222324252627
          28293031123
          45678910

          留言簿(5)

          隨筆分類(156)

          隨筆檔案(159)

          文章分類(1)

          相冊

          收藏夾(1)

          聯(lián)接技術(shù)類文章

          最新隨筆

          搜索

          最新評論

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

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

          效果圖:

            效果圖

           

          部署和代碼介紹:  

          復(fù)制代碼
          JSP前臺頁面:

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

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

          代碼很好懂,不講解了。
          復(fù)制代碼



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

          Uploadify屬性

          屬性名 類型 說明
          auto boolean 添加到隊列后自動上傳
          buttonImg string 瀏覽按鈕的背景圖片
          buttonText string 瀏覽按鈕的顯示文字
          cancelImg string 取消上傳按鈕的圖片
          checkScript string 服務(wù)端用來檢查文件是否重名的腳本
          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 當(dāng)鼠標(biāo)移上時產(chǎn)生特效
          script string 上傳表單提交的目標(biāo)腳本
          scriptAccess string swf的文件地址
          scriptData JSON 提交給后臺的附加信息
          simUploadLimit integer 同時可上傳的文件實例數(shù)
          sizeLimit integer 每文件的最大大小
          uploader string uploadify上傳的swf文件路徑
          width integer 瀏覽按鈕的寬度
          wmode string flash文件的wmode模式

          Uploadify事件

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

          Uploadify方法

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


          </script>

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

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


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 海盐县| 肇源县| 东宁县| 从化市| 合水县| 南漳县| 古蔺县| 临高县| 青岛市| 鲁甸县| 武乡县| 咸阳市| 泰顺县| 堆龙德庆县| 增城市| 商城县| 罗平县| 钦州市| 徐汇区| 大同县| 沭阳县| 固阳县| 贺兰县| 南乐县| 开鲁县| 陇西县| 宝应县| 手游| 柳江县| 运城市| 甘肃省| 芮城县| 沙洋县| 榆林市| 虹口区| 临清市| 新田县| 平武县| 武鸣县| 永兴县| 焦作市|