js图片压缩插件localResizeIMG参数文档 参数 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() 一个例子 document.querySelector('input').addEventListener('change', function () { // this.files[0] 是用户选择的文件 lrz(this.files[0], {width: 1024}) .then(function (rst) { // 把处理的好的图片给用户看看呗 var img = new Image(); img.src = rst.base64; img.onload = function () { document.body.appendChild(img); }; return rst; }) .then(function (rst) { // 这里该上传给后端啦 /* ==================================================== */ // 原生ajax上传代码,所以看起来特别多 ╮(╯_╰)╭,但绝对能用 // 其他框架,例如jQuery处理formData略有不同,请自行google,baidu。 var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://localhost:5000/'); xhr.onload = function () { if (xhr.status === 200) { // 上传成功 } else { // 处理其他情况 } }; xhr.onerror = function () { // 处理错误 }; xhr.upload.onprogress = function (e) { // 上传进度 var percentComplete = ((e.loaded / e.total) || 0) * 100; }; // 添加参数 rst.formData.append('fileLen', rst.fileLen); rst.formData.append('xxx', '我是其他参数'); // 触发上传 xhr.send(rst.formData); /* ==================================================== */ return rst; }) .catch(function (err) { // 万一出错了,这里可以捕捉到错误信息 // 而且以上的then都不会执行 alert(err); }) .always(function () { // 不管是成功失败,这里都会执行 }); }); JQuery 处理 例子中给的是原生ajax的方式,下面是JQuery上传的方式 注意!!:使用 zepto 的朋友请用 原生 或 jquery代替,在某些 android 设备下用 zepto 会出现不发送 Content-Type 导致无法上传的BUG。 感谢 @Poised_flw // 额外添加参数 rst.formData.append('fileLen', rst.fileLen); $.ajax({ url: 'http://koa-upload.coding.io', // 这个地址做了跨域处理,可以用于实际调试 data: rst.formData, processData: false, contentType: false, type: 'POST', success: function (data) { alert(JSON.stringify(data)); } }); |