thinkphp5结合Layui实现上传图片预览

2019-12-01   阅读:4283   类型:后端   分类:TP5    标签: TP5

image.png

上传模块自 layui 2.0 的版本开始,进行了全面重写,这使得它不再那么单一,它所包含的不仅是更为强劲的功能,还有灵活的UI。任何元素都可以作为上传组件来调用,譬如按钮、图片、普通的DIV等等,而不再是一个单调的file文件域。


前端html代码:前端采用隐藏域保存上传图片文件名


<input type="hidden" name="vod_img" id="vod_img111">


 <form class="layui-form">
  <div class="layui-form-item">
	  <label for="vod_name" class="layui-form-label">
		  <span class="x-red">*</span>名称
	  </label>
	  <div class="layui-input-inline">
		  <input type="text" id="vod_name" name="vod_name" required="" lay-verify="required"
		  autocomplete="off" class="layui-input" placeholder="视频名称">
	  </div>
  </div>
  <style>.layui-upload-img{ width: 92px; height:92px}</style>
  <div class="layui-form-item">
	  <label class="layui-form-label"><span class="x-red">*</span>演员图片</label>
	  <div class="layui-input-block">
	   <div class="layui-upload">
		  <button type="button" class="layui-btn" id="test1">上传图片</button>
		  <div class="layui-upload-list">
			<img class="layui-upload-img" id="demo1" >
			<p id="demoText"></p>
		  </div>
		</div>   
	  </div>
	  <input type="hidden" name="vod_img" id="vod_img111">
  </div>
  
  <div class="layui-form-item">
	  <label for="L_repass" class="layui-form-label">
	  </label>
	  <button  class="layui-btn" lay-filter="add" lay-submit="">
		  增加
	  </button>
  </div>
</form>

前端js代码:图片上传成功后赋值给隐藏域

$('#vod_img111').val(res.vod_img)


<script>
  layui.use(['upload',','form', 'layer'],function() {
			var laydate = layui.laydate;
			$ = layui.jquery
			,upload = layui.upload;
			var form = layui.form,
			layer = layui.layer;
			//监听提交
			form.on('submit(add)',
			function(data) {
				console.log(data);
				//发异步,把数据提交给php
				$.ajax({
				  type:'post',
				  dataType:'json',
				  data:data.field,
				  url:'{:url("admin/Vod/vod_add")}',
				  success:function(msg){
					if(msg.code==200){
						 layer.alert(msg.msg, {
							  icon: 6
						  },
						  function() {
							  //关闭当前frame
							  xadmin.close();
							  // 可以对父窗口进行刷新 
							  xadmin.father_reload();
						  });
					}else{
					  layer.msg(msg.msg, {icon: 5})
					}
				  },
				  error:function(msg){
					 layer.msg('网络错误', { icon:5});
				  }
				})
				return false;
			});
			//普通图片上传
			var uploadInst = upload.render({
			  elem: '#test1',
			  url: '{:url("admin/Vod/vod_upload")}',
			  multiple: false, //开启多图上传这个是重点
			  accept: 'images', // 允许上传的文件类型
			  size: 2048,  //允许大小,最大2M
			  field:'vod_img',
			  before: function(obj){
				//预读本地文件示例,不支持ie8
				obj.preview(function(index, per_img, result){
				  $('#demo1').attr('src', result); //图片链接(base64)
				});
			  }
			  ,done: function(res){
				console.log(res.vod_img)
				//如果上传失败
			   $('#vod_img111').val(res.vod_img)
				if(res.code == 1){
				  return layer.msg('上传成功');
				}
				
				//上传成功
			  }
			  ,error: function(){
				//演示失败状态,并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function(){
				  uploadInst.upload();
				});
			  }
			});

		});
</script>

后端PHP代码:上传操作和添加操作

<?php 
// 上传图片操作
public function vod_upload(){
// 获取表单上传文件 例如上传了001.jpg
	 $file = request()->file('vod_img');
		$info = $file->move(ROOT_PATH . 'public' . DS . 'static/uploads/vod');
		$reubfo = array();  //定义一个返回的数组
		if($info){
			$reubfo['code']= 1;
			$reubfo['vod_img'] = '/static/uploads/vod/'.date('Ymd').'/'.$info->getFilename(); 
		}else{
			// 上传失败获取错误信息
			$reubfo['code']= 0;
			$reubfo['err'] = $file->getError();
		}
		return $reubfo;
}

// 添加
public function vod_add(){
	if(request()->isPost()){
		$data=input('post.');
		$res=db('vod')->insert($data);
		if($res){
			return json(['code'=>200,'msg'=>'添加成功']);
		}else{
			return json(['code'=>500,'msg'=>'添加失败']);
		}
	}
	return view();
}
?>


腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/265.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×