WEB系統(tǒng)開發(fā)中用戶資料修改一般都會(huì)涉及頭像更換畜伐，簡(jiǎn)書中“設(shè)置”->"基礎(chǔ)設(shè)置"中的頭像更換就是一種比較不錯(cuò)的方式丈咐，動(dòng)態(tài)更換瑞眼，圖片壓縮，實(shí)施生效棵逊。特意看了下簡(jiǎn)書頭像上傳负拟，大致是默認(rèn)圖片上傳后直接壓縮為300x300大小的圖像，實(shí)時(shí)頭像進(jìn)行替換生效歹河。這里仿簡(jiǎn)書的頭像上傳，做了個(gè)demo花吟，下面就對(duì)如何實(shí)現(xiàn)這樣效果做個(gè)示例說明秸歧。
技術(shù)說明
為了實(shí)現(xiàn)ajax方式上傳頭像圖片，采用常用的js框架jquery,通過ajax提交POST請(qǐng)求實(shí)現(xiàn)圖片上傳衅澈，服務(wù)端使用php進(jìn)行請(qǐng)求處理键菱，并返回JSON格式結(jié)果，處理成功后今布，頁面對(duì)頭像進(jìn)行更新经备。
1.外部類庫:jquery-3.2.1.min.js
2.前端：html+javascript+css
3.后端：php5.6
界面效果
前端編碼
#顯示頭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對(duì)象，
//可以把form中所有表單元素的name與value組成一個(gè)queryString部默，提交到后臺(tái)侵蒙。
//在使用Ajax提交時(shí)，使用FormData對(duì)象可以減少拼接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);
}
#根據(jù)上傳成功并返回壓縮后的圖片url傅蹂，更新img標(biāo)簽src屬性
if(data.status=="success"){
$(".avatar img").attr("src",data.url+"?"+new Date().getTime());
}
},error:function(e){
console.log(e);
}
});
});
});
</script>
注意：這里加new Date().getTime()為失效瀏覽器緩存纷闺，每次更換頭像時(shí)能使用最新圖片
$(".avatar img").attr("src",data.url+"?"+new Date().getTime());
服務(wù)端代碼
#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;
?>
整體效果
總結(jié)說明
該功能技術(shù)點(diǎn)主要亮點(diǎn)，一個(gè)是前端界面通過jquery實(shí)現(xiàn)ajax方式提交form請(qǐng)求份蝴，其中用到了FormData對(duì)象犁功；另一點(diǎn)是服務(wù)端php對(duì)POST請(qǐng)求上傳的圖片的壓縮裁剪處理。處理的過程中還需要了一些小問題婚夫，由于保存的用戶圖片名稱不變浸卦，每次前端為保證圖片能正常顯示替換，在url中增加了時(shí)間戳new Date().getTime()用來規(guī)避瀏覽器的緩存案糙。
PS：代碼僅僅實(shí)現(xiàn)功能效果限嫌，服務(wù)端代碼根據(jù)不同需要可以進(jìn)一步定制完善靴庆。
