效果图
![效果](https://img-blog.csdn.net/20180915191519982?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzM0NjQ1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
前端
<link rel="stylesheet" type="text/css" href="/test/Public/src/layuiadmin/layui/css/layui.css" media="all">
<script src="/test/Public/src/layuiadmin/layui/layui.js"></script>
<button type="button" name="img" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
<button type="button" class="layui-btn" id="test8">上传</button>
<div id="img_sel">
选择的图片
</div>
<script>
layui.use('upload', function(){
var upload = layui.upload;
var uploadInst = upload.render({
elem: '#test1'
,url: "{:U('Home/updata_img')}"
,auto: false
,bindAction: '#test8'
,choose: function(obj){
obj.preview(function(index, file, result){
layui.use(['jquery', 'layer'], function(){
var $ = layui.$
,layer = layui.layer;
$('#img_sel').append('<img name = "s_pmt_dw" style="width: 120px; height: 150px; margin-left: 16px;"
src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
});
}
,done: function(res){
if(res.code > 0){
return layer.msg('上传失败');
}else {
return layer.msg('上传成功');
}
}
,error: function(){
}
});
});
</script>
后端
function updata_img(){
$upload = new \Think\Upload();
$upload->maxSize = 3145728 ;
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');
$upload->rootPath = './Public/Uploads/';
$info = $upload->upload();
if(!$info) {
$this->error($upload->getError());
}else{
$result['code']=0;
$result['msg']=$info['savepath'].$info['savename'];
$this->ajaxReturn($result);
}
}