前端將上傳的圖片轉換為base64並顯示
阿新 • • 發佈:2019-01-05
<li class="userMesHeader" >
<!--<span>頭像</span>-->
<a class="hiddenInputImg">
<div class="oldHeaderImg" id="userImgHead">
<img src="img/photo.jpg" class="avatar">
<input id="upImg" class="uploadImg" type="file">
</div>
</a>
</li>
//監聽上傳事件
$(".uploadImg").change(function () {var file=this.files[0];
//檔案型別
var fileType=this.files[0].type;
var type=getFileType(fileType);
//檔案大小
var fileSize=(this.files[0].size/ 1024).toFixed(2);
if(type!="jpg"&&type!="gif"&&type!="jpeg"&&type!="png"){
alert("您上傳的檔案不合法")
return false;
}
if(fileSize>10240){//定義不能超過10MB
alert("檔案太大,請重新選擇!!")
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function (e) {//上傳成功,執行上傳成功之後的事件
var str=e.target.result;
//將上傳成功後的圖片顯示在特定位置
$(".avatar").attr("src",str);
$.ajax({
//與後臺互動
})
};reader.onerror=function () {
alert("上傳失敗!!!")
}
});
//獲取上傳檔案的型別
function getFileType(filePath) {
var startIndex=filePath.lastIndexOf("/");
if(startIndex!=-1){
return filePath.substring(startIndex+1,filePath.length).toLowerCase();
}else {
return "";
}
}