Foxtable(狐表)用户栏目专家坐堂 → 前端压缩


  共有3836人关注过本帖树形打印复制链接

主题:前端压缩

帅哥哟,离线,有人找我吗?
刘林
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:八尾狐 帖子:1953 积分:15015 威望:0 精华:0 注册:2016/4/28 9:58:00
前端压缩  发帖心情 Post By:2021/10/7 17:22:00 [只看该作者]

<script>
var $ = layui.$
var up = layui.upload;
up.render({
elem: '#open',
multiple: true,
url: '../sc',
auto: false, //绑定了上传按键时要设自动上传为false
choose: function(obj) {
obj.preview(function(index, file, result) {
$('#wdzp img').attr("src", result);
})
},
// choose: function (obj) {
//                obj.preview(function (index, file, result) {
// $('#wdzp img').attr("src", result);
//                  newfile = new ImageCompressor(file, {
//                        quality: 0.6,
//                        maxWidth: 150,
//                        maxHeight: 200,
//                        success(result) {
//                            obj.resetFile(index, result, file.name);
//                        },
//                    });
//                });
//            },
bindAction: '#upload', //绑定上传按皱键
before: function() {
layer.load()
}, //打开上传提示弹层
allDone: function(obj) {
if (obj.aborted) {
$('#upload-cc').removeClass('layui-hide')
} else {
$('#upload-cc').addClass('layui-hide')
}
layer.closeAll()
}, //关闭上传提示弹层
error: function(index, upload) {
$('#upload').click(function() {
upload()
})
} //关上传出错时给重传绑定upload事件         
})
</script>



请问老师: 用layui 框架,jquer上传图片时想前端压缩后上传,红色部分想用注释掉的来改但不行,请问怎么改才行

 回到顶部
帅哥,在线噢!
有点蓝
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:110597 积分:562881 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By:2021/10/7 17:28:00 [只看该作者]

layui没用过,提供完整可测试的实例试试。


 回到顶部
帅哥哟,离线,有人找我吗?
刘林
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:八尾狐 帖子:1953 积分:15015 威望:0 精华:0 注册:2016/4/28 9:58:00
  发帖心情 Post By:2021/10/7 21:30:00 [只看该作者]

https://www.zhangxinxu.com/study/201707/js-compress-image-before-upload.html

找到一个例子,基础差,还是变通不来, 如何将打开文件得到result压缩再填到预览中,请帮研究下,谢谢

 回到顶部
帅哥,在线噢!
有点蓝
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:110597 积分:562881 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By:2021/10/7 22:11:00 [只看该作者]

就是给文件上传控件绑定change事件,看最后的【eleFile.addEventListener】,在选择文件后就会触发这个事件,事件里【reader.readAsDataURL】就会触发【img.onload】函数开始压缩和上传。

链接里基本每行都有说明了,如果具体内容还是不懂的,再搜索咯,比如:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL

 回到顶部