一、下载layui部署到项目,在页面引入layui.css和layui.js。
二、html代码
<div class="layui-form-item">
<label class="layui-form-label">图片</label>
<div class="layui-input-block">
<img id="pre_img" style="height: 30px;" />
<button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img">
<i class="layui-icon"></i>上传图片
</button>
<input type="hidden" name="img" value="">
</div>
</div>
三、js代码
layui.use(['upload','jquery'],function () {
$ = layui.jquery;
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#upload_img' //绑定元素
,url: '/api/Image/upload_img' //上传接口
,accept:'images'
,done: function(res){
//上传完毕回调
$('#pre_img').attr('src',res.msg);
$('input[name="img"]').val(res.msg);
}
,error: function(){
//请求异常回调
}
});
});
四、封装上传方法(TP5上传文件类 可以根据实际项目调整,只需要到时候返回图片的路径即可)
public function upload_img(){
$file = request()->file('file'); // 获取上传的文件
if($file==null){
exit(json_encode(array('code'=>1,'msg'=>'未上传图片')));
}
// 获取文件后缀
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
// 判断文件是否合法
if(!in_array($extension,array("gif","jpeg","jpg","png"))){
exit(json_encode(array('code'=>1,'msg'=>'上传图片不合法')));
}
$info = $file->move(ROOT_PATH.'public'.DS.'uploads'); // 移动文件到指定目录 没有则创建
$img = '/uploads/'.$info->getSaveName();
exit(json_encode(array('code'=>0,'msg'=>$img)));
}