thinkphp5怎么加layui實現圖片上傳功能

網站中很多表單都會用到上傳圖片,logo,照片,用戶也會上傳圖片,這個時候網站就需要一個上傳圖片的功能,而且在上傳后希望能預覽一下看上傳的對不對。

thinkphp5加layui實現圖片上傳功能(帶圖片預覽)思路,異步傳輸圖片并預覽,將異步上傳后的值返回表單隱藏域再提交。

1、引入文件

首先,要引入jquery文件,這是必須的

<link><script></script>

2、html部分


@@##@@??/>

3、功能實現

<script> 	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、后臺處理

圖片上傳

public?function?upload_img(){ 	$file?=?request()-&gt;file('file'); 	if($file==null){ 		exit(json_encode(array('code'=&gt;1,'msg'=&gt;'沒有文件上傳'))); 	} 	$info?=?$file-&gt;move(ROOT_PATH.'public'.DS.'uploads'); 	$ext?=?($info-&gt;getExtension()); 	if(!in_array($ext,array('jpg','jpeg','gif','png'))){ 		exit(json_encode(array('code'=&gt;1,'msg'=&gt;'文件格式不支持'))); 	} 	$img?=?'/uploads/'.$info-&gt;getSaveName(); 	exit(json_encode(array('code'=&gt;0,'msg'=&gt;$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'=&gt;1,'msg'=&gt;'影片名稱不能為空'))); 	} 	if($data['url']?==?''){ 		exit(json_encode(array('code'=&gt;1,'msg'=&gt;'影片地址不能為空'))); 	}  	if($id){ 		$this-&gt;db-&gt;table('video')-&gt;where(array('id'=&gt;$id))-&gt;update($data); 	}else{ 		$data['add_time']?=?time(); 		$this-&gt;db-&gt;table('video')-&gt;insert($data); 	} 	exit(json_encode(array('code'=&gt;0,'msg'=&gt;'保存成功'))); }

thinkphp5怎么加layui實現圖片上傳功能

? 版權聲明
THE END
喜歡就支持一下吧
點贊14 分享