layui 上传图片文件时加载状态封装

18 篇文章 0 订阅

html文件实现:

 <div class="layui-form-item pr-15">
    <label class="layui-form-label">图片上传<sup>*</sup></label>
    <div class="layui-input-block">
       <div class="layui-upload-drag" id="test10">
           <i class="layui-icon"></i>
           <p>点击上传,或将文件拖拽到此处</p>
       </div>
     </div> 
 </div>

js:加载方法及上传图片方法封装实现:

 //加载状态首先定义一个fales true
        function showloading(t) {
            if (t) {//如果是true则显示loading
                // console.log(t);
                loading = layer.load(1, {
                    shade: [0.3, '#000'], //0.1透明度的白色背景
                    content:'<p style="position: relative;left: -50px;">图片上传中,请耐心等待...</p>',
                    success: function (layerContentStyle) {
                        layerContentStyle.find('.layui-layer-content').css({
                            'padding-top': '50px',
                            'text-align': 'left',
                            'line-height':'30px',
                            'color':'#fff',
                            'width': '300px'
                        })
                    }

                });
            }else{//如果是false则关闭loading
                // console.log("关闭loading层:" + t);
                layer.closeAll('loading');
            }
        }
         //拖拽上传
          upload.render({
            elem: '#test10'
            ,url: '/api/Uploads/typelist?action=layui_img_one'
            ,before: function(input) {
                  //返回的参数item,即为当前的input DOM对象
                  showloading(true)
            }
            ,done: function(res){
                  showloading(false)
                if(res.code==0){
                    layer.msg(res.msg);
                    $("#test10").html('<img src="'+res.data.src+'" width="100" height="140">')
                }else{
                    layer.msg(res.msg);
                }
             // console.log(res)
            }
          });
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值