thinkphp5怎麼加layui實作圖片上傳功能-ThinkPHP-PHP中文網

thinkphp5怎麼加layui實作圖片上傳功能

WBOY

發布： 2023-05-28 11:13:06

轉載

1376 人瀏覽過

網站中很多表單都會用到上傳圖片，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[&#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、功能實作

<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、後台處理

圖片上傳

public function upload_img(){
	$file = request()->file(&#39;file&#39;);
	if($file==null){
		exit(json_encode(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;没有文件上传&#39;)));
	}
	$info = $file->move(ROOT_PATH.&#39;public&#39;.DS.&#39;uploads&#39;);
	$ext = ($info->getExtension());
	if(!in_array($ext,array(&#39;jpg&#39;,&#39;jpeg&#39;,&#39;gif&#39;,&#39;png&#39;))){
		exit(json_encode(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;文件格式不支持&#39;)));
	}
	$img = &#39;/uploads/&#39;.$info->getSaveName();
	exit(json_encode(array(&#39;code&#39;=>0,&#39;msg&#39;=>$img)));
}

登入後複製

儲存內容

public function save(){
	$id = (int)input(&#39;post.id&#39;);
	$data[&#39;title&#39;] = trim(input(&#39;post.title&#39;));
	$data[&#39;channel_id&#39;] = (int)input(&#39;post.channel_id&#39;);
	$data[&#39;charge_id&#39;] = (int)input(&#39;post.charge_id&#39;);
	$data[&#39;area_id&#39;] = (int)input(&#39;post.area_id&#39;);
	$data[&#39;img&#39;] = trim(input(&#39;post.img&#39;));
	$data[&#39;url&#39;] = trim(input(&#39;post.url&#39;));
	$data[&#39;keywords&#39;] = trim(input(&#39;post.keywords&#39;));
	$data[&#39;desc&#39;] = trim(input(&#39;post.desc&#39;));
	$data[&#39;status&#39;] = (int)input(&#39;post.status&#39;);

	if($data[&#39;title&#39;] == &#39;&#39;){
		exit(json_encode(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;影片名称不能为空&#39;)));
	}
	if($data[&#39;url&#39;] == &#39;&#39;){
		exit(json_encode(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;影片地址不能为空&#39;)));
	}

	if($id){
		$this->db->table(&#39;video&#39;)->where(array(&#39;id&#39;=>$id))->update($data);
	}else{
		$data[&#39;add_time&#39;] = time();
		$this->db->table(&#39;video&#39;)->insert($data);
	}
	exit(json_encode(array(&#39;code&#39;=>0,&#39;msg&#39;=>&#39;保存成功&#39;)));
}

登入後複製

以上是thinkphp5怎麼加layui實作圖片上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！