網站中很多表單都會用到上傳圖片,logo,照片,用戶也會上傳圖片,這個時候網站就需要一個上傳圖片的功能,而且在上傳后希望能預覽一下看上傳的對不對。
thinkphp5加layui實現圖片上傳功能(帶圖片預覽)思路,異步傳輸圖片并預覽,將異步上傳后的值返回表單隱藏域再提交。
1、引入文件
首先,要引入jquery文件,這是必須的
<link><script></script>
2、html部分
3、功能實現
<script> 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'=>'保存成功'))); }
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END