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小伙伴的帮助！

[ WebUpload ] WebUpload 插件初始化问题相关推荐

解决谷歌浏览器：Flash插件初始化失败,请更新您的FlashPlayer版本之后重试!
解决谷歌浏览器:Flash插件初始化失败,请更新您的FlashPlayer版本之后重试! chrome浏览器使用百度编辑器给网站上传图片时,提示"flash插件初始化失败,请更新您的flas ...
Paste Image插件初始化设置：修改图片保存路径、自动插入图片描述信息
Paste Image插件初始化设置:修改图片保存路径.自动插入图片描述信息 Paste Image插件默认将图片保存于所编辑的Markdown文档的当前目录下,若插入的图片较多,会导致该目录下显得杂 ...
WordPress 自定义插件初始化及卸载
编写WordPress插件一定会碰到修改表或者增加自定义表,或者修改某一张表的数据,因为这些动作不是经常性的,仅仅只需在插件激活的时候完成,WordPress已经留好了接口,只需要在插件中调用函数 r ...
CAD二次开发插件初始化接口IExtensionApplication
前言:在实际项目开发中,我们总会遇到一些问题.比如说在CAD打开之前,修改注册表的内容,或者解决CAD在没有完全加载想要的dll情况下,功能运行报错的bug.因此,下面和大家介绍一下IExtensio ...
ps html插件初始化失败,PS插件提示 “无法加载扩展，因为它未正确签署” 解决方法...
Adobe 更新到了 CC 2019版本以后,各种好用的插件.滤镜.扩展功能也陆续开始了更新,问题来了,也许适配新版出现了兼容问题,加载插件提示无法加载扩展,因为它未正确签署,具体什么原因,咱也不知道 ...
mysql+firewall_mysql - ERROR 1123（HY000）：无法初始化函数'mysql_firewall'; 插件初始化功能失败 - 堆栈内存溢出...
我正在尝试在我的一个Linux服务器上安装并启用mysql企业防火墙. 我需要手动运行,并执行linux_install_firewall.sql脚本. 当我这样做时,执行该行 mysql> I ...
ueditor图片上传 flash插件初始化失败
[前言] 这两天维护的一个老项目,运营抱怨后台管理发布资讯一直报浏览器flash不支持.作为后端开发只能硬着头皮来卖弄一下抠脚的前端技术. 看了一下代码富文本编辑器用的是 ueditor ,ued ...
webupload 上传
1. css 文件 .btn-file {position: relative;overflow: hidden;vertical-align: middle; } .btn-file > in ...
百度webupload的使用
百度上传工具webuploader,图片上传附加参数项目中需要上传视频,图片等资源.最先做的是上传图片,开始在网上找了一款野鸡插件,可以实现图片上传预览(无需传到后台).但是最近这个插件出了莫名的问 ...

[ WebUpload ] WebUpload 插件初始化问题

WebUpload 插件初始化问题

目录

实际案例

源码分析

参考

感谢

[ WebUpload ] WebUpload 插件初始化问题相关推荐

最新文章

热门文章