layui,上传图片,限制格式,限制大小

50 篇文章 1 订阅
11 篇文章 0 订阅
var uploadInst = upload.render({
    acceptMime: 'image/*',
    ext: 'jpg|png|gif|bmp|jpeg',
    before: function(obj){
        obj.preview(function(index, file, result){
            if(file.size >20*1024*1024){                 //判断上传每个图片大小
                // delete files[index];                     //过大删除指定图片
                // $('#remove_' + index).remove();   //展示容器移除
                layer.msg('文件大小不得超过20M', {icon: 2});  //layui弹出层,icon:5,时,是一个嘴角向下的脸
            }
        });
    },
  • 8
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.上传图片 使用layui的upload组件可以实现图片上传功能。 HTML代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="uploadBtn">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="preview"> <p id="uploadText"></p> </div> </div> ``` JavaScript代码: ```javascript layui.use(['upload', 'layer'], function(){ var upload = layui.upload; var layer = layui.layer; //执行实例 var uploadInst = upload.render({ elem: '#uploadBtn', //绑定元素 url: '/upload/', //上传接口 accept: 'images', //只允许上传图片 size: 1024, //限制上传文件大小,单位KB done: function(res){ //上传完毕回调 if(res.code == 0){ //上传成功 $('#preview').attr('src', res.data.url); $('#uploadText').html('上传成功'); }else{ //上传失败 layer.msg(res.msg, {icon: 2}); } }, error: function(){ //请求异常回调 layer.msg('上传失败', {icon: 2}); } }); }); ``` 2.删除图片layui,删除图片可以使用Ajax请求后端接口进行删除操作。 HTML代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="uploadBtn">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="preview"> <p id="uploadText"></p> <button type="button" class="layui-btn layui-btn-danger" id="deleteBtn">删除图片</button> </div> </div> ``` JavaScript代码: ```javascript layui.use(['upload', 'layer'], function(){ var upload = layui.upload; var layer = layui.layer; var imageUrl = ''; //执行实例 var uploadInst = upload.render({ elem: '#uploadBtn', //绑定元素 url: '/upload/', //上传接口 accept: 'images', //只允许上传图片 size: 1024, //限制上传文件大小,单位KB done: function(res){ //上传完毕回调 if(res.code == 0){ //上传成功 imageUrl = res.data.url; $('#preview').attr('src', imageUrl); $('#uploadText').html('上传成功'); }else{ //上传失败 layer.msg(res.msg, {icon: 2}); } }, error: function(){ //请求异常回调 layer.msg('上传失败', {icon: 2}); } }); //删除图片 $('#deleteBtn').click(function(){ if(imageUrl){ //发送Ajax请求删除图片 $.ajax({ type: 'post', url: '/deleteImage', data: { imageUrl: imageUrl }, success: function(res){ if(res.code == 0){ //删除成功 $('#preview').attr('src', ''); $('#uploadText').html(''); imageUrl = ''; }else{ //删除失败 layer.msg(res.msg, {icon: 2}); } }, error: function(){ //请求异常回调 layer.msg('删除失败', {icon: 2}); } }); }else{ layer.msg('还未上传图片', {icon: 2}); } }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值