js 移动端图片压缩上传,前端本地客户端压缩图片,兼容IOS,Android,PC、自动按需加载文件

这是一款可以压缩上传图片的js插件,做一些需要压缩上传的功能很方便,而且可以兼容web、安卓、ios端。


使用方式:

首先要引入js:

<script type="text/javascript" src="//dist/lrz.bundle.js"></script>

然后调用:

<script>

    //图片压缩上传,兼容安卓、苹果、web
    document.querySelector('#file').addEventListener('change', function () {

        var option = {
            width    : null,//width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。
            height   : null,//同上
            fieldName: 'file',//{String} 后端接收的字段名,默认:file*/
            quality  : 0.7,//{Number} 图片压缩质量,取值 0 - 1,默认为0.7
        }
        lrz(this.files[0],option)
            .then(function (rst) {
                // 处理成功会执行
                console.log(rst);
                $.ajax({
                    url: "后台api接收地址",
                    data:rst.formData,
                    dataType:'json',
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function (res) {
                       //res = JSON.stringify(res);
                       console.log(res)
                    },
                    error:function (e) {
                        console.log('ajax error',e)
                    }
                });

            })
            .catch(function (err) {
                console.log('upload_err',err)
                // 处理失败会执行
            })
            .always(function () {
                // 不管是成功失败,都会执行

            });
    });

  

</script>

主要参数就这几个:

option = {
            width    : null,//width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。
            height   : null,//同上
            fieldName: 'file',//{String} 后端接收的字段名,默认:file*/
            quality  : 0.7,//{Number} 图片压缩质量,取值 0 - 1,默认为0.7
        }


具体可以看github开源:https://github.com/think2011/localResizeIMG



只有js的附件:

imgResize.zip


评论/留言