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