手机端上传图片 先压缩再上传 兼容性高

//引入js文件 可去https://github.com/think2011/localResizeIMG下载
<script src="../localResizeIMG-master/dist/lrz.bundle.js" charset="utf-8" type="text/javascript"></script>


<input type="file" id="pic1" />

//js操作
document.querySelector('#pic1').addEventListener('change', function () {
    // this.files[0] 是用户选择的文件
    lrz(this.files[0], {width: 500})//图片的宽
        .then(function (rst) {
            // 把处理的好的图片给用户看看呗

            var img = new Image();
            img.src = rst.base64;

            img.onload = function () {
                document.body.appendChild(img);//显示图片 img为标签直接用就行
            };

            return rst;
        })

        .then(function (rst) {
            // 这里该上传给后端啦

            /* ==================================================== */
            // 其他框架，例如jQuery处理formData略有不同，请自行google，baidu。
            $.ajax({
                    url: '{G_WEB_PATH}/?/mobile/home/singleinsert_upload/', // 这个地址做了跨域处理，可以用于实际调试
                    data: rst.formData,//$_FILES php页面直接处理就行
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function (data) {
                        var hehe=eval("("+data+")");
                        $("#shaitu1").val(hehe['msg']);
                    }
                });
        })

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

            alert(err);
        })

        .always(function () {
            // 不管是成功失败，这里都会执行
        });
});