大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽:
创新互联网站建设公司,提供成都做网站、网站建设,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!
1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档就知道,能满足你所需要的所有功能,一言以蔽之,大而全;至于缺点,大概就是插件体积太大了,自带样式文件,而且还要依赖jquery类库。详细的教程网上俯拾即是,这里我就附上一段简单的demo:
实验 选择文件
2.移动端的插件,如果能脱离jquery,并且能满足项目的基本需求就再好不过了,这里像localResizeIMG就做得不错,它有4个历史版本,建议引入最新稳定版本localResizeIMG4,demo如下(样式要自己写):
实验
3.以上两款优缺点一目了然,本人公司用的是LUploader,纯原生js写的,不依赖任何类库,压缩后的js文件只有5k,实现图片压缩上传只需三步:
(1)在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id:
单击上传
(2)将样式文件和js文件引入到页面中:
(3)js脚本中初始化插件:
new LUploader(这里放需要绑定的input对象作为参数, { url: '',//post请求地址 multiple: false,//是否一次上传多个文件 默认false maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb accept: 'image/jpg,image/jpeg,image/png',//如果写成image/*会出现响应慢的问题 quality: 0.1,//压缩比 默认0.1 范围0.1-1.0 越小压缩率越大 showsize:false//是否显示原始文件大小 默认false });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。