ThinkPHP5+Layui实现图片上传加预览

 

<label class="layui-form-label">图片</label>
<a class="layui-btn" id="image" style="float: left;"><i class="layui-icon">&#xe67c;</i>上传图片</a>
<div class="layui-input-block" style="margin-left: 220px;">
  <input type="text" name="img" value="{$tptc.img}" class="layui-input" style="position: absolute;left: 0;top: 0;">
</div>
</div>

<div class="layui-form-item">
  <img style="margin-left: 110px;" id="img" src="{$tptc.img}">
</div>

<script>
layui.use('upload',function(){
  var upload = layui.upload,
  jq = layui.jquery;
  upload.render({
	url: '{:url("index/upload")}'
	,elem:'#image'
	,ext: 'jpg|png|gif'
	,area: ['500', '500px']
	,before: function(input){
	loading = layer.load(2, {
	shade: [0.2,'#000']
	});
	}
	,done: function(res){
	layer.close(loading);
	jq('input[name=img]').val(res.path);
	img.src = ""+res.path;
	layer.msg(res.msg, {icon: 1, time: 1000});
	}
  }); 

})
</script>

public function upload(){
    // 获取表单上传文件 例如上传了001.jpg
    $file = request()->file('file');
    // 移动到框架应用根目录/public/uploads/ 目录下
    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
    if($info){
	// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
	$path =  $info->getExtension();
        // 成功上传后 返回上传信息
	return json(array('state'=>1,'path'=>$path));
    }else{
        // 上传失败返回错误信息
	return json(array('state'=>0,'errmsg'=>'上传失败'));
    }
}