thinkphp5加layui實(shí)現(xiàn)圖片上傳功能（帶圖片預(yù)覽）

更新時間：2023年03月11日 10:28:12 投稿：yin

這篇文章主要介紹了thinkphp5加layui實(shí)現(xiàn)圖片上傳功能（帶圖片預(yù)覽）的相關(guān)資料,需要的朋友可以參考下

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['item']['img']){echo 'src="'.$data['item']['img'].'"';}?> style="height: 30px;" />
	<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、功能實(shí)現(xiàn)

<script type="text/javascript">
	layui.use(['form','layer','upload'],function(){
		$ = layui.jquery;
		var form = layui.form;
		layer = layui.layer;

		var upload = layui.upload;
   
		 //執(zhí)行實(shí)例
		var uploadInst = upload.render({
			elem: '#upload_img' //綁定元素
			,url: '/admins.php/admins/video/upload_img' //上傳接口
			,accept:'images'
			,done: function(res){
			  //上傳完畢回調(diào)
			  $('#pre_img').attr('src',res.msg);
			  $('input[name="img"]').val(res.msg);
			}
			,error: function(){
			  //請求異?；卣{(diào)
			}
		});
	});

	// 保存
	function save(){
		var title = $.trim($('input[name="title"]').val());
		var url = $.trim($('input[name="url"]').val());
		if(title == ''){
			layer.msg('請輸入影片名稱',{'icon':2,'anim':6});
			return;
		}
		if(url == ''){
			layer.msg('請輸入影片地址',{'icon':2,'anim':6});
			return;
		}
		$.post('/admins.php/admins/video/save',$('form').serialize(),function(res){
			if(res.code>0){
				layer.msg(res.msg,{'icon':2,'anim':2});
			}else{
				layer.msg(res.msg,{'icon':1});
				setTimeout(function(){parent.window.location.reload();},1000);
			}
		},'json');
	}
</script>

4、后臺處理

圖片上傳

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

保存內(nèi)容

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'=>1,'msg'=>'影片名稱不能為空')));
	}
	if($data['url'] == ''){
		exit(json_encode(array('code'=>1,'msg'=>'影片地址不能為空')));
	}

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

到此這篇關(guān)于thinkphp5加layui實(shí)現(xiàn)圖片上傳功能（帶圖片預(yù)覽）的文章就介紹到這了,更多相關(guān)thinkphp+layui圖片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: