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

孤人 提交于 2019-11-26 13:17:49

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)
            }
          });
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!