压缩input上传的图片以及移动端取消上传

最新推荐文章于 2023-06-06 09:28:30 发布

原创最新推荐文章于 2023-06-06 09:28:30 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何使用lrz.all.bundle.js进行图片压缩，并通过调整宽度来控制压缩后的文件大小。此外，还提供了移动端点击取消时loading消失的解决方案以及如何通过限定上传文件类型来提高图片上传效率的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、压缩图片

先引入lrz.all.bundle.js

获取到当前的input写change事件

var that = this;

改变width控制压缩的体积大小
lrz(that.files[0], {width: 800}).then(function (rst) {
    var img = new Image(),
      当前图片的大小sourceSize 压缩后的大小resultSize
        sourceSize = toFixed2(that.files[0].size / 1024),
        resultSize = toFixed2(rst.fileLen / 1024),
        scale = parseInt(100 - (resultSize / sourceSize * 100));
图片加载完后执行的函数
    img.onload = function (e) {

    };

img.src = rst.base64;

得到base64格式的图片

$('#upImage').attr('src',img.src);
return rst;

});

至于这个我也不知道为啥，反正每次都得写上

function toFixed2 (num) {

return parseFloat(+num.toFixed(2));

}

二、移动端点击取消loading不消失

判断input的值是否为空就ok了

三、<input type="file" accept="image/*">

image后面是*上传图片慢（指定上传的格式，减少时间）