压缩图片并使用Ajax上传

使用ajax方式上传图片的时候，有些浏览器会因为图片过大（毕竟现在手机拍的照片都4,5M了）。pc端支持的图片还要大一些，但是到了移动端的浏览器就不行了，图片超多2M就发送ajax失败，还不提示任何信息！这时候就需要先将图片压缩，然后再上传。推荐使用

“lrz.bundle.js” 开源插件，这是下载地址: https://github.com/fredshare/localResizeIMG 

1.引入jquery，注意，要引入高版本的，最好是 3.2.1及以上版本

2.引入 lrz.bundle.js 插件

3.

<script src="{{asset('/js/jquery-3.2.1.min.js')}}" type="text/javascript" charset="utf-8"></script>

<script src="{{asset('js/lrz.all.bundle.js')}}"></script>

lrz(document.getElementById('pic1').files[0], {width: 500})//图片的宽
    .then(function (rst) {

        // 表单另外所带的参数
        $("#myForm").serializeArray().map(function (x) {
            rst.formData.append(x.name,x.value);
        });

        rst.formData.append('checker_id',checkerId);

        $.ajax({
            url: "{{url('/wap/kq/vacation/apply')}}", // 地址
            data: rst.formData,//$_FILES php页面直接处理就行
            cache: false,
            async:false,
            processData: false,
            contentType: false,
            type: 'POST',
            dataType:'JSON',
            success: function (res) {
                if(res.code == 1){
                    alert(res.msg);
                    window.location.href = "{{url('wap/kq/vacation/myApplyShow')}}";
                }else{
                    alert(res.msg);
                }
            }
        });
    })

    .catch(function (err) {
        // 万一出错了，这里可以捕捉到错误信息
        // 而且以上的then都不会执行
        alert(err);
    })