前言:

自因为项目中需要使用上传插件,所以之前找了几款上传插件。但是呢,小的上传插件是不支持我们项目上传的(做虚拟机项目的,一个镜像可能好几个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. php中的echo,json_decode,json_encode常用函数使用注意事项

    ---恢复内容开始--- 1.echo函数 echo只能输出单个字符串或者整数,不能直接输出数组.要输出多个字符串必须用分号 eg: echo可以输出字符串加变量,如果输出的数字字符串则会将对应的数字 ...

  2. Android命令之-------ADB命令大全

    1.显示当前运行的全部模拟器:    adb devices2.启动ADB    adb start-server3.停止ADB   adb kill-server4.安装应用程序:      adb ...

  3. MATLAB R2017a 安装与破解

    第一步: 到我的百度网盘下载MatlAB2017a的原安装程序和破解补丁: 链接:https://pan.baidu.com/s/1jJz97DW 提取密码: d59m 第二步: 下载的两个iso文件 ...

  4. gulp不完全入门教程

    引言 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式化.浏览 ...

  5. BZOJ 1012: [JSOI2008]最大数maxnumber【线段树单点更新求最值,单调队列,多解】

    1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 10374  Solved: 4535[Subm ...

  6. hdu_1573 X问题(不互素的中国剩余定理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1573 X问题 Time Limit: 1000/1000 MS (Java/Others)    Me ...

  7. JSON对象添加删除属性

    假如目前我们有如下一个Json对象 var jsonObj={ 'param1':22, 'param2' :33 }; 增加属性: 我们现在向该对象jsonObj中添加一个新的属性字段:param3 ...

  8. 构建LVS-DR+Keepalive高可用集群

    ------client----------主LVS----------从LVS------------WEB1-------------WEB2--------- 2.2.2.250  2.2.2. ...

  9. UEP-自定义持久化类

    HY-UEP提供了两种持久化方式:基于JPA的持久化机制和自定义持久化机制,JPA的持久化机制 比较符合现在的软件开发模式,支持各种主流数据库;自定义持久化时我们平台产品的特有持久化 机制的升级,在综 ...

  10. grunt 插件开发注意事项

    grunt的插件机制 task.loadNpmTasks = function(name) { var root = path.resolve('node_modules'); var tasksdi ...