圖片上傳 · TP5常用代碼

LayUI實現圖片上傳 [TOC] ## 一、數據表設計 ### 1、標簽表 ~~~ DROP TABLE IF EXISTS `video_label`; CREATE TABLE `video_label` ( `id` int(10) NOT NULL AUTO_INCREMENT, `ord` int(3) NOT NULL DEFAULT '0' COMMENT '排序', `title` varchar(50) NOT NULL COMMENT '標簽標題', `status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '狀態：0正常，1禁用', `flag` varchar(50) NOT NULL COMMENT '標簽分類標識', PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=0 DEFAULT CHARSET=utf8; ~~~ ### 2、影片表 ~~~ DROP TABLE IF EXISTS `video`; CREATE TABLE `video` ( `id` int(10) NOT NULL AUTO_INCREMENT, `channel_id` int(10) NOT NULL COMMENT '頻道', `charge_id` int(10) NOT NULL COMMENT '資費', `area_id` int(10) NOT NULL COMMENT '地區', `title` varchar(50) NOT NULL COMMENT '影片名稱', `keywords` varchar(255) NOT NULL COMMENT '關鍵字', `desc` varchar(255) NOT NULL COMMENT '描述', `img` varchar(255) NOT NULL COMMENT '封面圖url', `url` varchar(255) NOT NULL COMMENT '影片url', `pv` int(10) NOT NULL DEFAULT '0' COMMENT '點擊量', `score` int(3) NOT NULL DEFAULT '0' COMMENT '影片評分', `is_vip` tinyint(1) NOT NULL COMMENT '是否vip才能看：0否，1是', `status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '狀態：0下線，1正常', `add_time` int(10) NOT NULL COMMENT '添加時間', PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=0 DEFAULT CHARSET=utf8; ~~~ ## 二、圖片上傳 ### 1、引入文件首先，要引入jQuery文件，這是必須的 ~~~ <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css"> <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"></i>上傳圖片</button> <img id="pre_img" <?php if($data['item']['img']){echo 'src="'.$data['item']['img'].'"';}?> style="height: 30px;" /> <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'=>'保存成功'))); } ~~~