推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)


Posted in Javascript onApril 21, 2017

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

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

<!Doctype html>
<html lang='en'>
<head>
 <meta charset='utf-8'/>
 <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>
 <title>实验</title>
 <style>
  *{
   margin:0;
   padding:0;
  }
  .progress{
   height:50px;
   background-color: red;
  }
 </style>
 <link rel="stylesheet" href="assets/webuploader.css" rel="external nofollow" >
</head>
<body>

 <div class="myuploader">
  <!--用来存放文件信息-->
  <div class="uploader-list">
  </div>
  <!-- 放置按钮 -->
  <div class="btns">
   <div id="picker">选择文件</div>
   <!-- <button class="send">开始上传</button> -->
  </div>
 </div>
 <img src="" alt="" />
 <div class="state"></div>
 <div class="progess"></div>
 
 <script src="assets/jquery-1.12.0.js"></script>
 <script src="assets/webuploader.html5only.min.js"></script>
 <script> 
  // 初始化WebUploader 
  var uploader = WebUploader.create({
   // 选完文件后是否自动上传
   auto:true,   

   // 文件接收的服务端路径
   server:'http://webuploader.duapp.com/server/fileupload.php',

   // 选择文件的按钮
   pick:'#picker',

   // 只允许选择图片文件
   accept: {
    title: 'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/jpg,image/jpeg,image/png' //如果写成image/*会出现响应慢的问题
   },  

   // 配置生成缩略图的选项
   thumb:{
    // 缩略图的宽高,当取值介于0-1时,被当成百分比使用
    width:500,
    height:250,
    // 强制转换成指定的类型
    type:"image/jpeg",
    // 图片质量,只有type为image/jpeg的时候才有效
    quality:70,
    // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false
    allowMagnify:true,
    // 是否允许裁剪
    crop:true   
   },  

   // 是否压缩图片, 默认如果是jpeg文件上传前会压缩,如果是false, 则图片在上传前不进行压缩
   compress:{
    // 压缩后的尺寸
    width: 100,
    height: 100,
    // 图片质量,只有type为image/jpeg的时候才有效。
    quality: 90,
    // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false
    allowMagnify: false,
    // 是否允许裁剪
    crop: false,
    // 是否保留头部meta信息
    preserveHeaders: true,
    // 如果发现压缩后文件大小比原来还大,则使用原来图片,此属性可能会影响图片自动纠正功能
    noCompressIfLarger: false,
    // 单位字节,如果图片大小小于此值,不会采用压缩
    compressSize: 0
   }
  });
  // 监听fileQueued事件来处理UI逻辑,当有一批文件被添加进队列改用filesQueued
  uploader.on('fileQueued', function( file ) {
   // 可以在控制台中查看file对象的详细信息
   console.log(file);
   // 创建缩略图 makeThumb,还可以写成(file,callback,width,height)
   uploader.makeThumb(file,function(error,src) {
    if (error) {
     console.log("不能预览");
     return;
    }else{
     $("img").attr('src',src); 
    }
   });    
  });   
  // 文件上传开始
  uploader.on('startUpload', function(file) {
   $(".state").text('开始');
  });  
  // 文件上传进度
  uploader.on('uploadProgress', function(file,percentage) {
   $(".progress").css('width', percentage * 100 + "%" );
  });    
  // 文件上传成功
  uploader.on('uploadSuccess', function(file) {
   console.log("成功");
   $(".state").text('已上传');
  });
  // 文件上传失败
  uploader.on('uploadError', function(file) {
   console.log("失败");
   $(".state").text('上传出错');
   // 获取文件统计信息
   console.log(uploader.getStats());
   //
   console.log(uploader.getFiles('error'));
  });
  // 文件上传完成
  uploader.on('uploadComplete', function(file) {
   console.log("完成");
   $(".progress").fadeOut();
  });    
 </script>
</body>
</html>

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

<!Doctype html>
<html lang='en'>
<head>
 <meta charset='utf-8'/>
 <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>
 <title>实验</title>
 <style>
  *{
   margin:0;
   padding:0;
  }
 </style>
</head>
<body>
 <!-- capture="camera"可以出现拍照;accept="image/*"仅接受图片 -->
 <input type="file" id="file" name="logo" capture="camera" >

 <!-- 一般情况下引入lrz.bundle.js,但绝对不要删除目录下的*.chunk.js,这些文件分别对应了IOS和Android的兼容代码,检测到符合环境时会自动引入,lrz.all.bundle.js是包含了所有引用了,莫名其妙的问题下就引用这个吧 -->
 <script src="assets/lrz.bundle.js"></script>
 <script> 
  // 通过change事件可以得到用户选择的图片
  document.querySelector("input").addEventListener("change",function(){
   // this.files[0]就是用户选择的文件,当做参数传入lrz(file, [options]),或者直接传入图片路径
   // [options]中的width表示图片最大不超过的宽度,默认为原图宽度,height不设时会适应宽度;quality表示图片压缩质量,取值 0 - 1,默认为0.7;fieldName表示后端接收的字段名,默认为 file
   lrz(this.files[0], {width: 1024})
   // 上述返回值是一个promise对象,后面可以接then(rst) catch(err) always()
   .then(function(rst){
    // 通过图片的预加载来实现图片预览
    var img = new Image();// 创建一个Image对象
    // 先绑定onload事件,然后再给src赋值,原因好像是为了解决ie,opera下的兼容问题 
    // 图片加载完毕时异步调用
    img.onload = function () {
     console.log("图片加载完毕")
     img.onload = null; // 解决内存泄漏,同时避免动态图片的事件多次触发 
     document.body.appendChild(img);
    };     
    img.src = rst.base64;// 载入生成后的图片base64
    // 返回rst便于链式调用
    return rst; 
   })
   .then(function(rst){
    // 除了以上的内容,rst.formData表示后端可处理的数据;rst.file表示压缩后的对象;rst.fileLen表示生成后的图片大小;rst.base64Len表示生成后的base的大小;rst.origin表示原始的对象,包括大小,日期等信息    
    console.log(rst.formData)
    //可以在这里写ajax的上传代码,原生和jquery的都可以
    // 返回rst便于链式调用
    return rst;     
   })
   .catch(function(err){
    // 万一出错了,这里可以捕捉到错误信息,而且以上的then都不会执行
    alert(err);
   })
   .always(function(){
    // 不管是成功失败,这里都会执行
    console.log("执行完成")
   })
  })
 </script>
</body>
</html>

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

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

<div class="LUploader" id="demo1">
  <div class="LUploader-container">
   <input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front' type="file" />
   <ul class="LUploader-list"></ul>
  </div>
  <div>
   <div class="icon"></div>
   <p>单击上传</p>
  </div>
</div>

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

<link rel="stylesheet" href="css/LUploader.css" rel="external nofollow" >
<script src="js/LUploader.js"></script>

(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
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
H5图片压缩与上传实例
Apr 21 #Javascript
H5手机端多文件上传预览插件
Apr 21 #Javascript
ES6新特性八:async函数用法实例详解
Apr 21 #Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 #Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
ES6新特性七:数组的扩充详解
Apr 21 #Javascript
React中ES5与ES6写法的区别总结
Apr 21 #Javascript
You might like
S900/ ETON E1-XM 收音机
2021/03/02 无线电
eAccelerator的安装与使用详解
2013/06/13 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
javascript新手语法小结
2008/06/15 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
认错检讨书
2014/10/02 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android