三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互，少不了图片的压缩上传，相关的插件有很多，相信大家都有用过，这里我就推荐三款，至于好处就仁者见仁喽：
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">
</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">
<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
});
三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)的更多相关文章
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
- springMVC多图片压缩上传的实现
首先需要在配置文件中添加配置: <!--配置文件的视图解析器,用于文件上传,其中ID是固定的:multipartResolver--> <bean id="multipar ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- 基于H5+ API手机相册图片压缩上传
// 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...
- 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...
- js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
- PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- 图片剪裁上传插件 - cropper
图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...
随机推荐
- 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件
[源码下载] 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件 作者 ...
- expect基本使用方法
参考: http://www.cnblogs.com/lzrabbit/p/4298794.html expect是linux系统中可以和子进程进行交互的一个命令,使用它可以做一些自动化工作.pyth ...
- 20个不可思议的 WebGL 示例和演示
WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示.WebGL 可以为 Canvas 提供硬件3D加速渲 ...
- 新手入门Underscore.js 中文（template）
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
- mysqld: Out of memory 解决办法(mysql)
自己配置的XWAMP环境,默认下没有详细配置mysql的my.ini,一方面不同服务器的配置不一样,另一方面按照默认为空的方式也一直没有出现过问题.不过最近服务器挂掉了,出现的症状是: 网站不能打开, ...
- 几句话就能让你理解：this、闭包、原型链
以下是个人对这三个老大难的总结(最近一直在学习原生JS,翻了不少书,不少文档,虽然还是新手,但我会继续坚持走我自己的路) 原型链 所有对象都是基于Object.prototype,Object.pro ...
- ArcGIS Engine开发之地图基本操作（3）
地图数据的加载 一.加载Shapefile数据 Shapefile文件是目前主流的一种空间数据的文件存储方式,也是不同GIS软件进行数据格式转换常用的中间格式.加载Shapefile数据的方式有两种: ...
- git+coding.net记录篇
很久没用了,有些配置快忘记了,记录下来,以供以后参考回忆 首先下载好git插件,然后在as上面设置好本地项目地址 设置好git,点击test测试通过 然后把项目添加到git本地库 你会看到你项目里的文 ...
- 基于SVN的项目管理——集中与分散
我们在此处不讨论 GIT 比 SVN 好多少,也不讨论 Maven 和 Gradle 哪个好用,基于现有的开发环境,大多数公司还是采用 SVN + Maven 来进行项目管理——因为这已经满足了大多数 ...
- 使用c/c++扩展python
用python脚本写应用比较方便,但有时候由于种种原因需要扩展python(比如给程序提供python接口等). 之前一直想整理下,今天终于坐下来把这件事情给做了,这里记录下,也方便我以后查阅. 说明 ...