最近小编对个人博客进行了重新架构，选择了ThinkPHP 5.0框架。深刻感受到用框架搭建网站的便利性。之前页面中 PHP代码 和 HTML 标签混合在一起，页面非常混乱，而且代码量大，维护起来很吃力。并且 ThinkPHP 上手非常容易，开发手册也很全。
言归正传，实现无刷新上传图片
1.首先客户端的ajax请求：
# index.html 文件
####### 选择图片后，触发事件。
# js文件
function uploadImage(){
// FormData对象，来发送二进制文件。
var formdata = new FormData();
// 将文件追加到 formdata对象中。
formdata.append("myfile",document.getElementById('myfile').files[0]);
$.ajax({
type: "POST",
url: "upload",
data:formdata,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
dataType: "json",
success: function(data){
console.log(data);
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
2.服务器端响应
/*
* 接收图片上传
* 1.通过ajax接收图片。
* 2.图片上传验证。
* 3.将图片移动到框架应用目录 public/uploads 目录下。
* 4.注意：当图片大于2M，由于php.ini配置，会报出一个致命错误。网站上线后需要手动配置。
*/
public function upload()
{
// 获取上传文件
$file = request() -> file('myfile');
// 验证图片,并移动图片到框架目录下。
$info = $file -> validate(['size' => 512000,'ext' => 'jpg,png,jpeg','type' => 'image/jpeg,image/png']) -> move(ROOT_PATH.'public'.DS.'uploads');
if($info){
// $info->getExtension(); // 文件扩展名
$mes = $info->getFilename(); // 文件名
echo '{"mes":"'.$mes.'"}';
}else{
// 文件上传失败后的错误信息
$mes = $file->getError();
echo '{"mes":"'.$mes.'"}';
}
}
OK，完成了。
在这里可以看到服务器端代码量非常少，既完成了对上传的图片的严格验证，又实现了错误信息的封装。