前言:

自因为项目中需要使用上传插件,所以之前找了几款上传插件。但是呢,小的上传插件是不支持我们项目上传的(做虚拟机项目的,一个镜像可能好几个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. 关于python使用cv画矩形并填充颜色同时填充文字

    font = cv2.FONT_HERSHEY_SIMPLEX # 使用默认字体 cv2.rectangle(im, (10, 10), (110, 110), (0, 0, 255), thickn ...

  2. zookeeper伪分布式集群环境搭建

    step1.下载 下载地址:http://zookeeper.apache.org/releases.html 将下载的压缩包放到用户家目录下(其他目录也可以) step2.解压 $tar –zxvf ...

  3. ssm maven spring AOP读写分离

    ssm maven spring AOP读写分离 总体流程 配置最开始写在pom.xml文件,解析到数据库配置文件,再解析到spring配置文件. 自定义注解DataSource:通过这个注解并且在s ...

  4. Codeforces 789A Anastasia and pebbles(数学,思维题)

    A. Anastasia and pebbles time limit per test:1 second memory limit per test:256 megabytes input:stan ...

  5. [bzoj1826] [JSOI2010]缓存交换

    虽然不知道为什么..但显然,每次扔掉离下次查询最远的内存单元就行了233 用堆来维护贪心...(优先队列大法好 #include<cstdio> #include<iostream& ...

  6. c++(挑选最大的n个数)

    从一堆数据中挑选n个最大的数,这个问题是网上流传的比较广的几个问题之一.具体来说,它的意思就是:假设我们有100个数据,我们需要挑选出最大的n个数据(n < 100),那么有没有办法实现这样一个 ...

  7. 【Zigbee技术入门教程-01】Zigbee无线组网技术入门的学习路线

    [Zigbee技术入门教程-01]Zigbee无线组网技术入门的学习路线 广东职业技术学院  欧浩源 一.引言    在物联网技术应用的知识体系中,Zigbee无线组网技术是非常重要的一环,也是大家感 ...

  8. [国嵌攻略][107][Linux进程管理子系统]

    进程与程序 1.程序:存放在磁盘上的一系列代码和数据的可执行映像,是一个静止的实体. 2.进程:是一个执行中的程序,它是一个动态的实体. 进程四要素 1.有一段程序供其执行.这段程序不一定是某个进程所 ...

  9. Java入门篇(五)——Java的字符串/String类

    前面在举例时有出现过String的例子,当时肯定有一部分朋友不知道这个是做什么用的.其实String类是Java中一个比较特殊的类,字符串即String类,它不是Java的基本数据类型之一,但可以像基 ...

  10. 将js进行到底:node学习笔记1

    废话:自高中以来一直对编程充满激情,磨剑五年,如今要毕业了,我不想用我已经擅长的知识敷衍,而想以一个全新的领域去面向我的毕设--是时候学习一下node.js node.js基础 对于JavaScrip ...