이미지 업로드 기능을 구현하기 위해 thinkphp5에layui를 추가하는 방법-ThinkPHP-php.cn

이미지 업로드 기능을 구현하기 위해 thinkphp5에layui를 추가하는 방법

WBOY

풀어 주다： 2023-05-28 11:13:06

앞으로

1344명이 탐색했습니다.

웹사이트의 많은 양식은 사진, 로고, 사진을 업로드하는 데 사용되며 사용자도 사진을 업로드할 것입니다. 이때 웹사이트에는 사진을 업로드하는 기능이 필요하며 업로드한 후 미리보기를 통해 확인하시기 바랍니다. 올바르게 업로드되었습니다.

Thinkphp5 pluslayui는 사진 업로드 기능(사진 미리보기 포함) 아이디어를 구현하고, 사진을 비동기적으로 전송하고 미리 보고, 비동기적으로 업로드된 값을 양식의 숨겨진 필드에 반환한 다음 제출합니다.

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

로그인 후 복사