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

2019-12-01 阅读：3895 分类：后端标签： TP5

上传模块自 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();
}
?>