示例
/**
* 本地图片压缩后上传
*/
$("#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的值