html ~~~ <div class="layui-form-item"> <label class="layui-form-label" title="封面">封面</label> <div class="layui-input-inline"> <input type="file" id="thumb_1" name="file" class="layui-upload-file" lay-title="点击上传封面"> </div> <div class="layui-input-inline"> <input type="hidden" name="thumb" id="thumb" value="" /> <div id="thumb_wrapper" style="width:60px;position: relative;display: none;"> <img alt="" id="thumb_img" src="" style="width: 60px;"> <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-ii" id="thumb_del" href="javascript:;"></a> </span> </div> </div> </div> ~~~ js： ~~~ layui.upload({ url:'/api/upload-file/upload-file', elem: '#thumb_1', success:function(res){ $("#thumb").val(res.url); $("#thumb_img").attr('src',res.url); $("#thumb_wrapper").show(); $("#thumb_img").off('click'); $("#thumb_img").on('click',function(){ layer.open({ type: 1, title: false, closeBtn:1, area: '500px', skin: 'layui-layer-nobg', //没有背景色 shadeClose: true, content: '<img src="'+res.url+'" style="width:500px;"/>' }); }); $("#thumb_del").off('click'); $("#thumb_del").on('click', function() { layer.confirm('确定要删除此封面图片？', { btn: ['我确定','点错了'], title:'无比重要的提示' }, function(mindex){ $("#thumb").val(null); $("#thumb_img").attr('src',null); $("#thumb_wrapper").hide(); layer.close(mindex); }, function(){ }); }); } }); ~~~