这里记录一下遇到的一个问题。
背景是这样的,工作中遇到了一个需要处理上传图片的场景。插件使用 plupload.js ,最先找官方网站代码参考了一番。
官网的测试代码如下:
1 | <ul id="filelist"></ul> |
1 | // moxie.swf,moxie.xap这两个文件也是从官网下载 |
实际使用
- 引入plupload.full.min.js并开始使用
- 在官网将此插件代码下载到本地,在项目中引入*.js,然后依次将测试中的代码复制到正式项目,启动运行
- 此时发现无论如何点击上传文件打开选择文件夹按钮始终没生效,点击没有任何反应
- 通过断点依次执行,OK,页面没有任何异常,该执行的都执行了,但是就是没有打开选择文件夹按钮
- 通过仔细观察发现,双击打开选择文件夹按钮就能成功打开当前选择文件夹
- 这是因为 plupload.js 文件有一个 browse_button 属性,它的作用是触发文件选择对话框的DOM元素,当点击该元素后便后弹出文件选择对话框。
1
2
3<div id="html5_1c14fq5te5gq90lpa1j2q8ip4_container" class="moxie-shim moxie-shim-html5" style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;overflow: hidden;z-index: 1;">
<input id="html5_1c14fq5te5gq90lpa1j2q8ip4" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="" tabindex="-1">
</div> - 发现此时的 div 已经浮动并且其width、height值都等于0,则input的width、height在此时100%的情况下也等于0,导致点击我们自己设置的上传按钮时不能够触发当前的file,就不会触发打开选择文件夹事件
- 简单有效的方法是给此 div 重置一个样式让其覆盖在我们自定义的点击按钮上,让其透明,不是真正的display:none,此时点击就没问题了。
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!