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的值