JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽:

1.名气最高的WebUploader

,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+,android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档就知道,能满足你所需要的所有功能,一言以蔽之,大而全;至于缺点,大概就是插件体积太大了,自带样式文件,而且还要依赖jquery类库。详细的教程网上俯拾即是,这里我就附上一段简单的demo:

实验

<div class="myuploader">

<div class="uploader-list">

<script src="assets/jquery-1.12.0.js">
<script src="assets/webuploader.html5only.min.js">

2.移动端的插件,如果能脱离jquery,并且能满足项目的基本需求就再好不过了,这里像localResizeIMG就做得不错,它有4个历史版本,建议引入最新稳定版本localResizeIMG4,demo如下(样式要自己写):

实验

<script src="assets/lrz.bundle.js">

3.以上两款优缺点一目了然,本人公司用的是LUploader,纯原生js写的,不依赖任何类库,压缩后的js文件只有5k,实现图片压缩上传只需三步:

(1)在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id:

单击上传

(2)将样式文件和js文件引入到页面中: