前端将上传的图片转换为base64并显示

 

           
           
               

                   
                   
               

           
   

//监听上传事件

$(".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.οnlοad=function (e) {//上传成功，执行上传成功之后的事件

        var str=e.target.result;

//将上传成功后的图片显示在特定位置

        $(".avatar").attr("src",str);

$.ajax({

//与后台交互

})

    };
    reader.οnerrοr=function () {
        alert("上传失败！！！")
    }

});

//获取上传文件的类型

    function getFileType(filePath) {

        var startIndex=filePath.lastIndexOf("/");
        if(startIndex!=-1){
            return filePath.substring(startIndex+1,filePath.length).toLowerCase();
        }else {
            return "";
        }
    }