How to add layui to thinkphp5 to implement image upload function

Many forms on the website will be used to upload pictures, logos, photos, and users will also upload pictures. At this time, the website needs a function to upload pictures, and after uploading, I hope to preview it to see if it is uploaded correctly.

thinkphp5 adds layui to implement the image upload function (with image preview), asynchronously transmit the image and preview it, return the asynchronously uploaded value to the hidden field of the form and then submit it.

1. Import the file

First of all, it is necessary to introduce the jQuery file

<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 part

<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  src="/static/imghwm/default1.png"  data-src="&#39;.$data[&#39;item&#39;][&#39;img&#39;].&#39;"  class="lazy"  id="pre_img" <?php if($data[&#39;item&#39;][&#39;img&#39;]){echo &#39;&#39;;}? alt="How to add layui to thinkphp5 to implement image upload function" >  />
	<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. Function implementation

<script type="text/javascript">
	layui.use([&#39;form&#39;,&#39;layer&#39;,&#39;upload&#39;],function(){
		$ = layui.jquery;
		var form = layui.form;
		layer = layui.layer;

		var upload = layui.upload;
   
		 //执行实例
		var uploadInst = upload.render({
			elem: &#39;#upload_img&#39; //绑定元素
			,url: &#39;/admins.php/admins/video/upload_img&#39; //上传接口
			,accept:&#39;images&#39;
			,done: function(res){
			  //上传完毕回调
			  $(&#39;#pre_img&#39;).attr(&#39;src&#39;,res.msg);
			  $(&#39;input[name="img"]&#39;).val(res.msg);
			}
			,error: function(){
			  //请求异常回调
			}
		});
	});

	// 保存
	function save(){
		var title = $.trim($(&#39;input[name="title"]&#39;).val());
		var url = $.trim($(&#39;input[name="url"]&#39;).val());
		if(title == &#39;&#39;){
			layer.msg(&#39;请输入影片名称&#39;,{&#39;icon&#39;:2,&#39;anim&#39;:6});
			return;
		}
		if(url == &#39;&#39;){
			layer.msg(&#39;请输入影片地址&#39;,{&#39;icon&#39;:2,&#39;anim&#39;:6});
			return;
		}
		$.post(&#39;/admins.php/admins/video/save&#39;,$(&#39;form&#39;).serialize(),function(res){
			if(res.code>0){
				layer.msg(res.msg,{&#39;icon&#39;:2,&#39;anim&#39;:2});
			}else{
				layer.msg(res.msg,{&#39;icon&#39;:1});
				setTimeout(function(){parent.window.location.reload();},1000);
			}
		},&#39;json&#39;);
	}
</script>

4. Background processing

Picture upload

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)));
}

Save content

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 above is the detailed content of How to add layui to thinkphp5 to implement image upload function. For more information, please follow other related articles on the PHP Chinese website!