WEB系统开发中用户资料修改一般都会涉及头像更换，简书中“设置”->"基础设置"中的头像更换就是一种比较不错的方式，动态更换，图片压缩，实施生效。特意看了下简书头像上传，大致是默认图片上传后直接压缩为300x300大小的图像，实时头像进行替换生效。这里仿简书的头像上传，做了个demo，下面就对如何实现这样效果做个示例说明。
技术说明
为了实现ajax方式上传头像图片，采用常用的js框架jquery,通过ajax提交POST请求实现图片上传，服务端使用php进行请求处理，并返回JSON格式结果，处理成功后，页面对头像进行更新。
1.外部类库:jquery-3.2.1.min.js
2.前端：html+javascript+css
3.后端：php5.6
界面效果
demo.png
前端编码
#显示头div,提交form,其他html样式代码先略去
<div class="avatar">
</div>
<form id="uploadForm" enctype="multipart/form-data" method="post">
<input type="file" name="file" id="file" accept="image/*" class="hide">更改头像
>
</form>
<script lang="javascript">
$(document).ready(function(){
$("input[name='file']").change(function(){
//FormData对象，
//可以把form中所有表单元素的name与value组成一个queryString，提交到后台。
//在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量
var formData = new FormData();
formData.append("file",$("input[name='file']")[0].files[0]);
$.ajax({
url:'upload-ajax.php',
type:'post',
data: formData,
cache: false,
processData: false,
contentType: false,
success:function(data){
console.log(data);
if(data.status=="fail"){
alert(data.message);
}
#根据上传成功并返回压缩后的图片url，更新img标签src属性
if(data.status=="success"){
$(".avatar img").attr("src",data.url+"?"+new Date().getTime());
}
},error:function(e){
console.log(e);
}
});
});
});
</script>
注意：这里加new Date().getTime()为失效浏览器缓存，每次更换头像时能使用最新图片
$(".avatar img").attr("src",data.url+"?"+new Date().getTime());
服务端代码
#file:upload-ajax.php
<?php
if($_FILES["file"]["error"]){
$result = array('status' => 'fail', 'message' => $_FILES["file"]["error"]);
}else{
$dir = "../uploads/avatar/";
file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
try{
if(!is_array($_FILES["file"]["name"])) {
$ext = pathinfo($_FILES["file"]['name'])['extension'];
$fileName = $dir.'avatar_'.$dUserId.'_300x300.'.$ext;
$width = 300;//缩放后的图片宽度
$height = 300;//缩放后的图片高度
$uploadimg = $_FILES["file"]["tmp_name"];
list($src_w,$src_h,$src_type)=getimagesize($uploadimg); // 获取原图尺寸类型
$img = '';
if($src_type==1){
$img = imagecreatefromgif($uploadimg);
}else if($src_type==2){
$img = imagecreatefromjpeg($uploadimg);
}else if($src_type==3){
$img = imagecreatefrompng($uploadimg);
}
$newimg = imagecreatetruecolor($width,$height);
imagecopyresampled($newimg,$img,0,0,0,0,$width,$height,$src_w,$src_h);
imagepng($newimg,$fileName);
imagedestroy($newimg);
imagedestroy($img);
$result = array('status' => 'success','message'=>'','url' =>$fileName);
}
}catch(Exception $e){
$result = array('status' => 'fail', 'message' =>$e);
}
}
$jsonstring = json_encode($result);
header('Content-Type: application/json');
echo $jsonstring;
?>
整体效果
总结说明
该功能技术点主要亮点，一个是前端界面通过jquery实现ajax方式提交form请求，其中用到了FormData对象；另一点是服务端php对POST请求上传的图片的压缩裁剪处理。处理的过程中还需要了一些小问题，由于保存的用户图片名称不变，每次前端为保证图片能正常显示替换，在url中增加了时间戳new Date().getTime()用来规避浏览器的缓存。
PS：代码仅仅实现功能效果，服务端代码根据不同需要可以进一步定制完善。
