WebUpload 插件初始化問題

本文主要針對WebUpload 文件上傳插件在初始化多個時，插件自定義按鈕顯示位置錯位導致點擊失效的問題提供解決方案。（亦可描述為webupload插件在父容器display屬性為none的情況下初始化位置異常）

官網

目錄

• WebUpload 插件初始化問題
  • 目錄
  • 實際案例
  • 源碼分析
  • 參考
  • 感謝

---

實際案例

1、基于avalon開發的前端界面

• ms-if =”布爾表達式” 為true，表示生成下方頁面文本；反之，不生成

• ms-visible=”布爾表達式” 為true，表示顯示下方頁面文本（display:block）；反之，不顯示（display:none）

2、解決方法

• 初始化前先利用ms-if顯示webuploader綁定的容器部分，再執行初始化方法
  
• 或者利用ms-if每次動態生成頁面部分代碼，再執行初始化方法
  
• 利用ms-visible控制顯隱，結合數組array接收Webuploader.create({…})生成的插件對象，在界面顯示后（display:block），利用循環執行uploader內部函數refresh();

前兩種方法相似，只是控制動態生成的文本域不同
第三種最優，利用webuploader內置函數refresh函數，對于界面資源利用更佳
核心是初始化在dom顯示之后執行，否則，refresh函數需要dom顯示之后執行！

/*** 預案資源文件管理*/RES_MAN: {/*** 初始化*/init: function () {this.createWebUploader(0);this.createWebUploader(1);},/*** webUoloader對象容器*/uploader: [],/*** 文件資源ID*/resId:[],/*** 創建文件上傳容器*/createWebUploader: function (index) {var resMan = this;var dropBox = $('#' + 'uploadBox' + index);var ipt = $('#' + 'filePicker' + index);resMan.uploader[index] = WebUploader.create({// 選完文件后，是否自動上傳。auto: true,// swf文件路徑swf: capsule.stringUtil.addPreUrl("/js/lib/webuploader/dist/Uploader.swf"),//指定Drag And Drop拖拽的容器dnd: $('#' + 'uploadBox' + index),// 文件接收服務端。server: capsule.stringUtil.addPreUrl("/data/plan/main/uploadPlanFile",{type:index}),// 選擇文件的按鈕?？蛇x。// 內部根據當前運行是創建，可能是input元素，也可能是flash.pick: ipt,accept: {// 只允許選擇圖片文件。title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'//修改這行,優化選擇文件界面開啟效率},// 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！resize: false});//其他事件監聽},//其他界面樣式控制.../*** 刷新布局定位*/refresh:function(){$.each(this.uploader,function(i,plugin){plugin.refresh();});}

源碼分析

對于display:none的dom元素,offset方法獲取到的值如下：

由于界面一開始是隱藏狀態進行初始化的，界面初始化兩個插件后：

由于絕對定位導致的的相對定位生成差異
兩個按鈕雖然css屬性一樣，確并沒有重疊，細致的原因未去研究，有興趣的可以看下css絕對的定位相關的介紹

可以看到，兩個插件自動生成的offset都是0，采用上述方案優化js邏輯后：

建議

1、如果js邏輯沒有問題，但是問題依然沒有解決，本人遇到的是由于avalon渲染需要時間導致的，因此加了個延時，確保dom渲染完畢，再執行refresh方法即可
2、對于每次初始化控件，對界面資源的使用略顯浪費，建議控制顯示和隱藏，在界面初始加載的時候進行webuploader插件的初始化，初始化完畢后，點擊顯示后，利用延時確保dom渲染完畢后遍歷uplader[]，執行refresh，重新定位更佳。

/*** 確保下載容器display屬性不為none*/setTimeout(function(){PageHelper.RES_MAN.refresh();},1000);

參考

WebUploader初始化時的缺陷及處理方法
webuploader插件，我踩得坑

感謝

@ssq小伙伴的幫助！

總結

以上是生活随笔為你收集整理的[ WebUpload ] WebUpload 插件初始化问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。