前言:
自因为项目中需要使用上传插件,所以之前找了几款上传插件。但是呢,小的上传插件是不支持我们项目上传的(做虚拟机项目的,一个镜像可能好几个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做判断!