网站中很多表单都会用到上传图片，logo，照片，用户也会上传图片，这个时候网站就需要一个上传图片的功能，而且在上传后希望能预览一下看上传的对不对。

thinkphp5加layui实现图片上传功能（带图片预览）思路，异步传输图片并预览，将异步上传后的值返回表单隐藏域再提交。

1、引入文件

首先，要引入jQuery文件，这是必须的

<link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css" rel="external nofollow" > <script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>

2、HTML部分

<form class="layui-form"> <div class="layui-input-inline">     <button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img"><i class="layui-icon">&#xe67c;</i>上传图片</button>     <img id="pre_img" <?php if($data['item']['img']){echo 'src="'.$data['item']['img'].'"';}?>  />     <input type="hidden" name="img" value="{$data.item.img}"> </div>       <div class="layui-form-item">         <div class="layui-input-block">             <button class="layui-btn" onclick="save()">保存</button>         </div>     </div> </form>

3、功能实现

<script type="text/javascript">     layui.use(['form','layer','upload'],function(){         $ = layui.jquery;         var form = layui.form;         layer = layui.layer;           var upload = layui.upload;               //执行实例         var uploadInst = upload.render({             elem: '#upload_img' //绑定元素             ,url: '/admins.php/admins/video/upload_img' //上传接口             ,accept:'images'             ,done: function(res){               //上传完毕回调               $('#pre_img').attr('src',res.msg);               $('input[name="img"]').val(res.msg);             }             ,error: function(){               //请求异常回调             }         });     });       // 保存     function save(){         var title = $.trim($('input[name="title"]').val());         var url = $.trim($('input[name="url"]').val());         if(title == ''){             layer.msg('请输入影片名称',{'icon':2,'anim':6});             return;         }         if(url == ''){             layer.msg('请输入影片地址',{'icon':2,'anim':6});             return;         }         $.post('/admins.php/admins/video/save',$('form').serialize(),function(res){             if(res.code>0){                 layer.msg(res.msg,{'icon':2,'anim':2});             }else{                 layer.msg(res.msg,{'icon':1});                 setTimeout(function(){parent.window.location.reload();},1000);             }         },'json');     } </script>

4、后台处理

图片上传

public function upload_img(){     $file = request()->file('file');     if($file==null){         exit(json_encode(array('code'=>1,'msg'=>'没有文件上传')));     }     $info = $file->move(ROOT_PATH.'public'.DS.'uploads');     $ext = ($info->getExtension());     if(!in_array($ext,array('jpg','jpeg','gif','png'))){         exit(json_encode(array('code'=>1,'msg'=>'文件格式不支持')));     }     $img = '/uploads/'.$info->getSaveName();     exit(json_encode(array('code'=>0,'msg'=>$img))); }

保存内容

public function save(){     $id = (int)input('post.id');     $data['title'] = trim(input('post.title'));     $data['channel_id'] = (int)input('post.channel_id');     $data['charge_id'] = (int)input('post.charge_id');     $data['area_id'] = (int)input('post.area_id');     $data['img'] = trim(input('post.img'));     $data['url'] = trim(input('post.url'));     $data['keywords'] = trim(input('post.keywords'));     $data['desc'] = trim(input('post.desc'));     $data['status'] = (int)input('post.status');       if($data['title'] == ''){         exit(json_encode(array('code'=>1,'msg'=>'影片名称不能为空')));     }     if($data['url'] == ''){         exit(json_encode(array('code'=>1,'msg'=>'影片地址不能为空')));     }       if($id){         $this->db->table('video')->where(array('id'=>$id))->update($data);     }else{         $data['add_time'] = time();         $this->db->table('video')->insert($data);     }     exit(json_encode(array('code'=>0,'msg'=>'保存成功'))); }