移动端压缩图片。上传获取图片并压缩。lrz.all.bundle.js插件。 accept="image/*"加载慢的问题

查看下载地址：http://www.cnblogs.com/52fhy/p/5355601.html

查看input[type='file']的图片路径。在我的另一篇博客：http://blog.csdn.net/qq_33769914/article/details/54705820

而这篇文章可以说是综合性的，用了这个插件方法就也是可以获取图片路径的，并且还压缩了。所以这样就淘汰原来方法。更加好啦。

希望在上传的时候获取图片并压缩他，之后上传至服务器。

<script src="./dist/lrz.all.bundle.js"></script> //这里加载的这个有个all，和上面地址的例子可能是不一样。因为
这个all的js是比较全的兼容android和ios的啦。

上传图片<input type="file" capture="camera" accept="image/*" name="logo" />

capture（捕获的意思）表示调用相册相机camera，录音机video和摄像机audio
accept 表示，直接打开系统文件目录。（其实html5的input:file标签还支持一个multiple属性，表示可以支持多选。加上这个multiple后，capture就没啥用了，因为multiple是专门yong用来支持多选的。）


但是！！！！

input type="file"  添加了 accept="image/*"属性在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题。使得页面弹出选择文件的弹窗非常的慢6-10s，这是因为accept="image/*"会每一个文件都遍历一次所有的”image/*”文件类型。

解决办法是：删掉它或者将 * 通配符，或者修改为指定的MIME类型：

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">

$(function(){    $('input[name=logo]').on('change', function(){         lrz(this.files[0], {width: 640})   //width:640这个代表的是图片占得内存的大小。值越小，占内存越小
            .then(function (rst) {                         //请求ajax把图片地址传过去                 $.ajax({                    url: site_url + 'api/user/updLogo',                    type: 'post',                    data: {img: rst.base64},   //rst.base64就是这个图片的地址 base64字符串                    dataType: 'json',                    timeout: 200000,                    error: doAjax.error,                    success: doAjax.success,                });                       })            .catch(function (err) {                //捕获错误，而且一旦出错上面的then都不会执行 })            .always(function () {              //无论成败都会执行这里            });    });})

如果您的图片不是来自用户上传的，那么也可以直接传入图片路径：

lrz('./xxx/xx/x.png')        .then(function (rst) {            // 处理成功会执行        })        .catch(function (err){            // 处理失败会执行        })        .always(function () {            // 不管是成功失败，都会执行        });