1. 程式人生 > >前端將上傳的圖片轉換為base64並顯示

前端將上傳的圖片轉換為base64並顯示

 <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 "";
        }
    }