Web Uploader初始化隐藏容器失败及点击上传图片时反应较慢的问题

问题1:在一个页面集成一个或者多个文件上传插件,初始化时有些DOM容器是隐藏的,这时候经常会出现初始化失败的情况,虽然按钮样式改变了,但是点击就是没反应(有时候不经意点了哪个地方,或许会出现文件选择框),仔细看了一下,发现了问题所在,如下图:

实例化的时候,会在初始选定的选择按钮上生成一层“label”遮罩层,点击事件也是绑定在label上,但如果实例化时,指定的DOM是隐藏的(display:none)话,只能生成1x1的遮罩,而点击事件依然绑定在label上,始终点击不到,当然也就没反应了。

  解决办法:既然是隐藏DOM,必然会有触发显示的操作,比如点击按钮控制显隐,这个时候可以用uploader的refresh()方法,uploader.refresh();问题就解决了。

问题2:上传图片时,点击选择按钮之后,要停个几秒钟才会出现文件选择框。

  解决办法:

accept: {
            title: ‘Images‘,
            extensions: ‘jpg‘,
            mimeTypes: ‘image/*‘
        }

  这时虽然限制只接受图片,但扫描文件时仍会全部扫描,自然是慢的不行,改下代码:

accept: {
            title: ‘Images‘,
            extensions: ‘jpg‘,
             mimeTypes: ‘image/jpg‘    //修改此处
        }

  这时就会选择性的扫描文件,只扫描你设置的类型,速度自然就快了。

时间: 2024-07-29 14:38:44

Web Uploader初始化隐藏容器失败及点击上传图片时反应较慢的问题的相关文章

使用Web Uploader实现多文件上传

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webu

Web Uploader文件上传

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webu

Web Uploader文件上传插件

http://www.jq22.com/jquery-info2665 插件描述:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率. 分片.并发 分片与并发结合,将一

百度上传插件Web Uploader

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率 分片.并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传输错误时,

了解Web Uploader

1.简介WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用.采用大文件分片并发上传,极大的提高了文件上传效率. a.分片.并发分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传

死磕Tomcat7源码之二:web组件初始化

经过死磕Tomcat7源码之一:解析web.xml,已经知道webapp的配置信息是如何解析到内存中.接下来,就是如何将对应的组件对象初始化化.分析所有的组件初始化过程,根本不可能.本文重点针对阐明3个主要组件的初始化过程,分别是:servlet,listener,filter.通过本文,你可以掌握以下知识点 了解组件初始化调用序列 组件servlet,listener,filter组件的初始化顺序 listener的初始化过程 servlet的初始化过程 filter的初始化过程 1.组件初始

Gitlab CI 自动部署 asp.net core web api 到Docker容器

为什么要写这个? 在一个系统长大的过程中会经历不断重构升级来满足商业的需求,而一个严谨的商业系统需要高效.稳定.可扩展,有时候还不得不考虑成本的问题.我希望能找到比较完整的开源解决方案来解决持续集成.监控报警.以及扩容和高可用性的问题.是学习和探索的过程分享给大家,也欢迎同行的人交流. 先来一个三步曲,我们将完成通过GitLab CI 自动部署 net core web api 到Docker 容器的一个示例.这是第一步,通过此文您将了解如何将net core web api 运行在Docker

Web Uploader 文件上传的使用

Web Uploader 的使用 一.引用css {{-- webuploader上传样式 --}} <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/> 二.HTML部分的编写 <div class="row cl"> <label class="form-label col-xs-4

使用maven插件自动部署web应用至Docker容器的tomcat

配置maven 在pom.xml加入 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <plugins>     <plugin>         <groupId>org.apache.tomcat.maven</groupId>         <artifactId>tomcat7-maven-plugin</artifactId>         <version>2.2</version&g