1.先写出前端页面
(1).Html代码
<form>
<div class="form-group">
<label>商品logo:</label>
<input type="file" class="form-control logo" accept="image/gif,image/jpeg,image/x-png">
<span></span>
</div>
<button type="button" class="btn btn-primary">添加</button>
</form>
(2).jQuery代码
//给表单一个改变事件
$('.logo').change(function(event) {
var formData = new FormData();
formData.append("file", $(this).get(0).files[0]);
$.ajax({
//请求地址
url:"{:url('test/Seek/logo')}",
//请求方式必须是post
type:'POST',
dataType:"json",
data:formData,
cache: false,
contentType: false, //不可缺
processData: false, //不可缺
success:function(data){
if (data.code == 1){
//如果不明白为什么要替换标签 首先可以打印一下 data.phone 可以试试有没有数据
//如果有 则替换标签 目的是为了 ajax上传时接值
//此步骤也是将后端上传后的文件名显示在页面上
$(".logo").next().html("<font class='goods_logo'>"+data.goods_logo+"</font>")
}
}
});
});
(3).效果如下
2.后端代码
public function logo(){
//获取前端文件
$file = $this->request->file('file');
//判断文件是否为空
if (!empty($file)) {
// 移动到框架应用根目录/public/uploads/ 目录下,并且验证大小与类型
$info = $file->validate(['size' => 1048576, 'ext' => 'jpg,png,gif'])->rule('uniqid')->move(ROOT_PATH . 'public' . DS . 'uploads');
if ($info) {
// 成功上传后 获取上传信息
$goods_logo = '/uploads/'.$info->getSaveName();
//此步骤为缩略图制作
$image = \think\Image::open(".".$goods_logo);
// 按照原图的比例生成一个最大为150*150的缩略图并保存为thumb.png
$image->thumb(150, 150)->save(".".$goods_logo);
} else {
// 上传失败获取错误信息
$file->getError();
}
} else {
$goods_logo = '';
}
//判断一下返回相对应的三要素
if($goods_logo !== ''){
return ['code'=>1,'msg'=>'成功','goods_logo'=>$goods_logo];
}else{
return ['code'=>404,'msg'=>'失败','goods_logo'=>''];
}
}
3.上传成功后效果如下