js压缩图片上传插件localResizeIMG
示例
/**
* 本地图片压缩后上传
*/
$("#vfile").change(function(){
var _this = $(this);
lrz(this.files[0],{width: 1024,quality :1,fieldName:'file'}).then(function(data) {
return upload(_this.get(0) , data.formData);
}).then(function(data) {
// data => 上传成功后返回的JSON数据
// TODO::处理逻辑
}).catch(function(err) {
console.log(err);
});
}); /**
* 直接上传原图
*/
$("#vfile").change(function(){
upload(this).then(function(data) {
// data => 上传成功后返回的JSON数据
// TODO::处理逻辑
}).catch(function(err) {
console.log(err);
});
}); /**
* 图片上传 后端正常处理图片<input file="file" name="file" />
* @param selector 文件域DOM Obj [必选]
* @param formData 文件上传formData [可选]
*/
function upload(selector , formData) {
if(!formData) {
formData = new FormData();
formData.append("file", $(selector)[0].files[0]);
} var url = "{:U('Wap/Public/ajaxSingleUpload')}";
return new Promise(function(resolve,reject){
$.ajax({
url : url,
type : 'POST',
data : formData,
processData : false,
contentType : false,
dataType:"json",
success : function(response) {
resolve(response);
},
error : function(response) {
reject(response);
}
});
});
}
方法参数说明:
参数
lrz(file, [options]);
file 通过 input:file 得到的文件,或者直接传入图片路径
[options] 这个参数允许忽略
width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。
height {Number} 同上
quality {Number} 图片压缩质量,取值 0 - 1,默认为0.7
fieldName {String} 后端接收的字段名,默认:file 返回结果 返回值是一个promise对象 then(rst) rst.formData 后端可处理的数据
rst.file 压缩后的file对象(默认已经丢在rst.formData有一份了),需要注意的是如果压缩率太低的话,这个会是原始的file对象
rst.fileLen 生成后的图片的大小,后端可以通过此值来校验是否传输完整
rst.base64 生成后的图片base64,后端可以处理此字符串为图片,也直接用于img.src = base64
rst.base64Len 生成后的base64的大小,后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)
rst.origin 也就是原始的file对象,里面存了一些原始文件的信息,例如大小,日期等。
catch(err) always()
资源下载地址:https://github.com/think2011/localResizeIMG
只需要引用一个文件即可
<script src="./dist/lrz.bundle.js"></script>
补充
FormData对象参数方法https://developer.mozilla.org/en-US/docs/Web/API/FormData
示例:FormData.get('key');//获取追键为key的值
js压缩图片上传插件localResizeIMG的更多相关文章
- js 压缩图片 上传
感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...
- html5+js压缩图片上传
最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
- Jquery自定义图片上传插件
1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- PHP+js实现图片上传,编辑
文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字: 然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面: 最后表单提交时,把文件信息 ...
- ueditor图片上传插件的使用
在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...
- WebUploader压缩图片上传
WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档 ...
随机推荐
- python的生成器(斐波拉契数列(Fibonacci))
代码: 函数版本: #斐波拉契数列(Fibonacci) def fib(max): n=0 a,b=0,1 while n < max: a,b = b,a+b n = n+1 return ...
- 排查linux系统是否被入侵
在日常繁琐的运维工作中,对linux服务器进行安全检查是一个非常重要的环节.今天,分享一下如何检查linux系统是否遭受了入侵? 一.是否入侵检查 1)检查系统日志 检查系统错误登陆日志,统计IP重试 ...
- 33)django-原生ajax,伪ajax
一:概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...
- ASP.NET的路由系统:路由映射
总的来说,我们可以通过RouteTable的静态属性Routes得到一个基于应用的全局路由表,通过上面的介绍我们知道这是一个类型的RouteCollection的集合对象,我们可以通过调用它的MapP ...
- C3盒子弹性布局
有效的对一个容器中的子元素进行排列.对齐和分配空白空间. 对浏览器版本要求较高,多用于移动端的响应式设计 flex-direction 顺序指定了弹性子元素在父容器中的位置. flex-directi ...
- functions 示例
示例1: ","字符串截取 CREATE OR REPLACE FUNCTION splitstr(p_string IN VARCHAR2, p_delimiter IN VA ...
- Linux/Unix/Mac OS下的远程访问和文件共享方式
scp -P 20022 src.tar.gz zhouhh@192.168.12.13:/home/zhouhhscp -P 20022 zhouhh@192.168.12.13:/home/zho ...
- Android定位元素与操作
一.常用识别元素的工具 uiautomator:Android SDK自带的一个工具,在tools目录下 monitor:Android SDK自带的一个工具,在tools目录下 Appium Ins ...
- python基础复习
复习-基础 一.review-base 其他语言吗和python的对比 c vs Python c语言是python的底层实现,解释器就是由python编写的. c语言开发的程序执行效率高,开发现率低 ...
- h5在手机端实现简单复制
<a href="https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js">下载clipborrd ...