layui图片上传+thinkphp5
html
<div class="layui-tab-item">
<div class="layui-form-item">
<label class="layui-form-label"> <span class="x-red">*</span>LOGO:</label>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-input-block">
<img style="width:150px" class="layui-upload-img" id="demo1" src="{$data.logo}">
<p id="demoText"></p>
</div>
</div>
<input type="hidden" name="logo" id="logo" >
</div>
</div>
<script>
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/admin/systemImg' //上传接口
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传成功
if(res.code =="1"){
$('#logo').val(res.info);
return layer.msg(res.msg);
}else{
return layer.msg(res.msg);
}
}
,error: function(){
//演示失败状态,并实现重传
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();
});
}
});
});
</script>