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 id="pre_img" <?php if($data[&#39;item&#39;][&#39;img&#39;]){echo &#39;src="&#39;.$data[&#39;item&#39;][&#39;img&#39;].&#39;"&#39;;}?>  />
	<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;
   
		 //執(zhí)行實例
		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){
			  //上傳完畢回調(diào)
			  $(&#39;#pre_img&#39;).attr(&#39;src&#39;,res.msg);
			  $(&#39;input[name="img"]&#39;).val(res.msg);
			}
			,error: function(){
			  //請求異?；卣{(diào)
			}
		});
	});

	// 保存
	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!