前言:

自因为项目中需要使用上传插件,所以之前找了几款上传插件。但是呢,小的上传插件是不支持我们项目上传的(做虚拟机项目的,一个镜像可能好几个G),所以呢这个插件要支持分片上传,拓展性要高(肯定的啦,不支持分片,玩命啊?)!

所以呢,我就找到了两款插件:

1. 百度的Webuploader

2. 国外的Plupload (这插件真的好用,特此推荐,但是也有点小坑的地方。但相比百度的好一点,其实也是看实际需要!!!)

重点介绍坑的地方:

1.webuploader插件在支持h5的浏览器上是使用h5上传的,所以呢在你配置flash路径的时候,即使路径找不到,它特么的也不会报错(隐形的炸弹)!

所以,在不支持h5的浏览器下,该插件会使用flash来上传的啦!鄙人,目前的一个项目用的是vue.js,真的是好不容易整合进了webuploader!!!之前最早用plupload一直报undefined mox.js!哎,所以只能找百度的这个插件了!

那下面呢,就来说下flash上传的问题。首先说场景!我们的这个项目是最低支持ie9,于是捏,我们的测试就去测试了下ie9,一测试发现,根本无法选择上传文件!

我听闻之后,甚是惊讶,禀着程序员的思想:“我写的代码怎么可能有问题?”,我就去调试了!一开始猜测是flash的一个坑!(下面会提到!!!),但是验证之后发现不是的!

经过百度之后,反现了ie9是支持部分h5的,所以就猜测ie9 <都是使用flash上传的!那行啊,为了验证到底是不是flash的问题呢,我就在自己的代码中增加了一行参数:

既然,支持强制使用flash,那好嘛!添上这参数之后,在chroem上运行,发现出现了ie9上的问题!这是我就已经确定是flash的问题,也行就是flash路径的问题!然后呢,我就刷新页面,发现呢flash文件一直都没加载,这时候,我就更加坑定了!

但是,心里也一直的骂这插件,你说你为啥也不报错呢?既然找到原因,那就解决好了!解决之后,后续发现最大的一个坑!

因为,我们这个项目提交之前,需要文件的name base64加密一下,但是呢在其他的浏览器上发现都没问题,但是唯独在ie9上有问题,乱码!!!心里骂了ie一万遍,其实最后发现不是ie的问题!

经过抓包发现,在flash上传的时候,name没有base64!!!

2.  removeFile()根本不是真正的移除,而是改变文件的状态!

这个大家应该都知道,用过的都说过这个问题!但是呢,都说有个QUENEN我就看文档上有,就不知道怎么用!有知道的大神,可以留言!

顺带贴下。我是怎么弄的一次上传一个的!顺带再吐槽一点,这插件支持多个的真的好,但是就不能支持一次只上传一个么?有参数设置,其实呢?鸟用!!!

意会就行!!!轻喷!!!

2017.4.27 修改!

这部分,是因为当初刚使用这个插件,不清楚的地方!首先,道歉,错了就承认嘛!但是呢,这玩意的removeFile的确不好使,如果想清楚全部队列的盆友,请使用rest()方法,这个将会整个清楚!

也就不要使用我的这个方法了,步骤太过繁琐!不过,也算一个解决方法吧!

3. 被隐藏的控件,实例化不会成功!

这是我之前就知道的一个坑,所以我跨过去了!那是在2015的冬天,那时候我刚做php没多久!!!哎,改这个Bug改的我真是天昏地暗,不知道咋回事!最后终于发现,特么的是flash的问题!!!

据说,是flash的坑,然后就延伸到这个插件上了!!!

4. 文件选择的时候,代码有问题!

本人js算辣鸡,多多少少看的懂它的意思,就改了下!经测试还是有效的!

场景:

就是测试妹子,发了一个无后缀的文件来测试上传的问题,结果发现可以被选中,然后上传!然后妹子,果断提出了BUG。。。

其实想吐槽,你特么后台不判断啊= =,后台不是PHP写的,使用python那帮哥们写的。。。但是呢,这的确是个BUG

可能会有人问,file控价不是可以定义上传文件后缀咩?好的,我的回答是:为了兼容性,chrome在52版本上会有一个大BUG,无视任何上传插件,

就是你定义了过滤的文件类型,但是chrome在选择文件框弹出来的时候有8秒之多,,,所以,我们就又改了下源码中的在file中增加自定义的后缀的js,

统一在上传部分增加一行,哪些可以上传。。。。总之,就是用js做判断!

百度插件webuploader的坑!的更多相关文章

  1. js插件---webuploader 使用(lavarel中使用)

    js插件---webuploader 使用(lavarel中使用) 一.总结 一句话总结: 多去看几个具体使用的实例,很多blog教程都有坑,多看几个交叉印证可以没那么多坑 1.webuploader ...

  2. js插件---WebUploader 如何接收服务端返回的数据

    js插件---WebUploader 如何接收服务端返回的数据 一.总结 一句话总结: uploadSuccess有两个参数,一个是file(上传的文件信息),一个是response(服务器返回的信息 ...

  3. 百度上传插件WebUploader,angularjs指令封装

    1.WebUploader特点 官网地址:http://fex.baidu.com/webuploader/ 1.1 分片.并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上 ...

  4. 百度上传插件---webuploader的使用

    需求:朋友让找一个兼容IE8的上传插件,卧槽,IE8,我当时是崩溃的,然后就搜到了这个百度的插件,官网是这样描述的 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HT ...

  5. 百度上传插件 WebUploader初始使用

    引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" ...

  6. 记一次SpringBoot使用WebUploader的坑

    问题: B/S通常都会涉及到文件的上传,普通文件上传使用文件框,后台接收文件即可 我遇到的问题是要开发一个大文件上传的功能,那就肯定要支持文件的分片 分析: 1.参考网上的资料后,通常的多文件和大文件 ...

  7. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  8. Qt编写自定义控件插件路过的坑及注意事项

    在一日一控件的口号下,终于写好了五十几个自定义控件,包括各种仪表盘,各种温度计,各种进度条,各种按钮等,具体可参见(http://www.cnblogs.com/feiyangqingyun/p/61 ...

  9. 浅谈百度地图API的坑

    我们可以使用百度地图生成器生成地图码(功能开发 还是使用官方文档吧) 注意百度地图坑 1.地图和我们申请的ak码版本问题 (解决方案:推荐大家使用2.0) 远程链接:<script type=& ...

随机推荐

  1. 详说 Navicat for MySQL 快捷键

    详说 Navicat for MySQL 快捷键: Navicat 主窗口 Navicat 主窗口快捷键 常规 Navicat 常规快捷键 表设计器 Navicat 表设计器快捷键 表查看器 Navi ...

  2. Spring(一)Spring的第一滴血

    前言 开始工作了,但是一进来公司本来是做爬虫和数据分析的,但是走了一个后端的,导致我必须要去顶替他的工作.因为这个项目使用的是Spring. SpringMVC.Hibernate所以我又要去回忆一下 ...

  3. Java中import及package的用法

    有些人写了一阵子 Java,可是对於 Java 的 package 跟 import 还是不 太了解很多人以為原始码 .java 档案中的 import 会让编译器把所 import 的程式通通写到编 ...

  4. [bzoj4592] [Shoi2015]脑洞治疗仪

    题面无法直视系列. 中规中矩的线段树题. 涉及的操作有:区间赋值为0,计算区间内1的个数,区间赋值为1,求区间内最大的连续的1的个数. #include<cstdio> #include& ...

  5. HDU_5523Game

    Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Sub ...

  6. POI Sax 事件驱动解析Excel2007文件

    Excel2007版本的代码如下,本文主要是用于POI解析大文件Excel容易出现内存溢出的现象而提出解决方案,故此解决了大数据量的Excel文件解析的难度,在此拿出来贡献给大家,谢谢! 里面用到的相 ...

  7. Spring Boot实战:静态资源处理

    前两章我们分享了Spring boot对Restful 的支持,不过Restful的接口通常仅仅返回数据.而做web开发的时候,我们往往会有很多静态资源,如html.图片.css等.那如何向前端返回静 ...

  8. C#的改进特性

    1.初始器 当你新建一个对象实例的时候,是否遇到下面这种情况: class a = new class(); a.item1 = "; a.item2 = "; 或者写一个构造函数 ...

  9. 解决指向iframe的target失效

    今天遇到一个bug. 主页面中点击左侧导航栏[某]项后,右侧的iframe页面加载到了新窗口.之后,所有选项的iframe加载都异常. 检查<a>标签target="main&q ...

  10. 了解前端中的SPA

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 单页W ...