layui + thinkphp 图片上传 （选择图片后预览 点击后提交）

版权声明：如有原创标签 转载请标明出处 https://blog.csdn.net/qq_41734645/article/details/82414903

效果图

前端

<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">&#xe67c;</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){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){    //在当前ID为“demo2”的区域显示图片
                    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(){
        //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'];  //  echo '{"code":0,"msg":"成功上传","data":{"src":"Public/"}}';
            $this->ajaxReturn($result);
        }
    }