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;
   
		 //執(zhí)行實(shí)例
		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(){
			  //請(qǐng)求異?；卣{(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;請(qǐng)輸入影片名稱&#39;,{&#39;icon&#39;:2,&#39;anim&#39;:6});
			return;
		}
		if(url == &#39;&#39;){
			layer.msg(&#39;請(qǐng)輸入影片地址&#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!