Bagaimana untuk menambah layui ke thinkphp5 untuk melaksanakan fungsi muat naik imej

Banyak borang di laman web akan digunakan untuk memuat naik gambar, logo, gambar, dan pengguna juga akan memuat naik gambar Pada masa ini, laman web memerlukan fungsi untuk memuat naik gambar, dan selepas memuat naik, saya berharap untuk melihatnya jika ia dimuat naik dengan betul.

thinkphp5 menambah layui untuk melaksanakan fungsi muat naik imej (dengan pratonton imej), menghantar imej dan pratonton secara tidak segerak, mengembalikan nilai yang dimuat naik secara tidak segerak ke medan tersembunyi borang dan kemudian menyerahkannya.

1. Import fail

Pertama sekali, anda perlu mengimport fail jQuery, yang perlu

<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 3. Pelaksanaan fungsi

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

4. Pemprosesan latar belakang

Muat naik gambar

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

Simpan kandungan

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

Atas ialah kandungan terperinci Bagaimana untuk menambah layui ke thinkphp5 untuk melaksanakan fungsi muat naik imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!