WebUpload 插件初始化问题

本文主要针对WebUpload 文件上传插件在初始化多个时,插件自定义按钮显示位置错位导致点击失效的问题提供解决方案。(亦可描述为webupload插件在父容器display属性为none的情况下初始化位置异常)

官网

目录


实际案例

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}),

               // 选择文件的按钮。可选。
               // 内部根据当前运行是创建,可能是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小伙伴的帮助!

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐