thinkphp5怎么加layui实现图片上传功能

本篇内容介绍了“thinkPHP5怎么加layui实现图片上传功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

网站中很多表单都会用到上传图片，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'=>'保存成功')));}

“thinkphp5怎么加layui实现图片上传功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！