layui 上传图片-点击按钮失效

1.上传图片-点击按钮失效

引入：

将lay里的两个文件夹放到项目的js里面

<link rel="stylesheet" type="text/css" href="css/layui.css"/>

<script src="js/layui.js" type="text/javascript" charset="utf-8"></script>

Html:

<div class="layui-upload">

<button type="button" class="layui-btn" id="test1">上传图片</button>

<div class="layui-upload-list">

      <img class="layui-upload-img" id="demo1">

  <p id="demoText"></p>

</div>

</div>

Css:

//图片的cell

.layui-upload-list{

height: 2rem;

border: 1px solid #ccc;

}

//图片

.layui-upload-img{

height: 2rem;

}

//弹出的上传错误

.layui-layer-msg{

display: none;

}

//点击按钮的背景颜色设置

.layui-btn{

background-color: rgb(63,81,181);

}

Js:

layui.use('upload', function(){

  var $ = layui.jquery

  ,upload = layui.upload;

  //普通图片上传

  var uploadInst = upload.render({

    elem: '#test1'

//  ,url: '/upload/'

    ,before: function(obj){

      //预读本地文件示例，不支持ie8

      obj.preview(function(index, file, result){

        $('#demo1').attr('src', result); //图片链接（base64）

      });

    }

//     ,done: function(res){

//       //如果上传失败

//       if(res.code > 0){

//         return layer.msg('上传失败');

//       }

//       //上传成功

//     }

//     ,error: function(rr){

//       //演示失败状态，并实现重传

//       console.log(rr)

//       var demoText = $('#demoText');

//       demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');

//       demoText.find('.demo-reload').on('click', function(){

//         uploadInst.upload();

//       });

//     }

});

});