网站中很多表单都会用到上传图片，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部分

1. <form class="layui-form"> 
2. <div class="layui-input-inline"> 
3.     <button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img"><i class="layui-icon">&#xe67c;</i>上传图片</button> 
4.     <img id="pre_img" <?php if($data['item']['img']){echo 'src="'.$data['item']['img'].'"';}?> style="height: 30px;" /> 
5.     <input type="hidden" name="img" value="{$data.item.img}"> 
6. </div> 
7.  
8.     <div class="layui-form-item"> 
9.         <div class="layui-input-block"> 
10.             <button class="layui-btn" onclick="save()">保存</button> 
11.         </div> 
12.     </div> 
13. </form> 

3、功能实现

1. <script type="text/javascript"> 
2.     layui.use(['form','layer','upload'],function(){ 
3.         $ = layui.jquery; 
4.         var form = layui.form; 
5.         layer = layui.layer; 
6.  
7.         var upload = layui.upload; 
8.      
9.          //执行实例 
10.         var uploadInst = upload.render({ 
11.             elem: '#upload_img' //绑定元素 
12.             ,url: '/admins.php/admins/video/upload_img' //上传接口 
13.             ,accept:'images' 
14.             ,done: function(res){ 
15.               //上传完毕回调 
16.               $('#pre_img').attr('src',res.msg); 
17.               $('input[name="img"]').val(res.msg); 
18.             } 
19.             ,error: function(){ 
20.               //请求异常回调 
21.             } 
22.         }); 
23.     }); 
24.  
25.     // 保存 
26.     function save(){ 
27.         var title = $.trim($('input[name="title"]').val()); 
28.         var url = $.trim($('input[name="url"]').val()); 
29.         if(title == ''){ 
30.             layer.msg('请输入影片名称',{'icon':2,'anim':6}); 
31.             return; 
32.         } 
33.         if(url == ''){ 
34.             layer.msg('请输入影片地址',{'icon':2,'anim':6}); 
35.             return; 
36.         } 
37.         $.post('/admins.php/admins/video/save',$('form').serialize(),function(res){ 
38.             if(res.code>0){ 
39.                 layer.msg(res.msg,{'icon':2,'anim':2}); 
40.             }else{ 
41.                 layer.msg(res.msg,{'icon':1}); 
42.                 setTimeout(function(){parent.window.location.reload();},1000); 
43.             } 
44.         },'json'); 
45.     } 
46. </script> 

4、后台处理

图片上传

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

保存内容

1. public function save(){ 
2.     $id = (int)input('post.id'); 
3.     $data['title'] = trim(input('post.title')); 
4.     $data['channel_id'] = (int)input('post.channel_id'); 
5.     $data['charge_id'] = (int)input('post.charge_id'); 
6.     $data['area_id'] = (int)input('post.area_id'); 
7.     $data['img'] = trim(input('post.img')); 
8.     $data['url'] = trim(input('post.url')); 
9.     $data['keywords'] = trim(input('post.keywords')); 
10.     $data['desc'] = trim(input('post.desc')); 
11.     $data['status'] = (int)input('post.status'); 
12.  
13.     if($data['title'] == ''){ 
14.         exit(json_encode(array('code'=>1,'msg'=>'影片名称不能为空'))); 
15.     } 
16.     if($data['url'] == ''){ 
17.         exit(json_encode(array('code'=>1,'msg'=>'影片地址不能为空'))); 
18.     } 
19.  
20.     if($id){ 
21.         $this->db->table('video')->where(array('id'=>$id))->update($data); 
22.     }else{ 
23.         $data['add_time'] = time(); 
24.         $this->db->table('video')->insert($data); 
25.     } 
26.     exit(json_encode(array('code'=>0,'msg'=>'保存成功'))); 
27. }

Tags: thinkphp5图片上传 layui图片上传

分享到：