需求:图片上传,要求图片base64大小不超过2MB
注意:图片上传需要本地环境,需要安装node,然后安装live-server,在文件目录打开命令行,运行live-server即可;基于框搭建的项目忽略这个问题。
HTML
<!-- 头像 -->
<dl class="clearfix">
<dt>头  像</dt>
<dd class="guding_wid modify_station">
<img class="pic_user" src="{{ $user->avatar }}" alt="">
</dd>
<dd class="btn_modify">
<input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png">
</dd>
</dl>
javascipt代码
//获取图片路径
var getObjectURL = function getObjectURL(file,callback) {
var url = null ,
objUrl = $(file).get(0).files[0],
reader = new FileReader();
reader.readAsDataURL(objUrl);
reader.onload = function () {
url = reader.result;//图片base64
var imgLen=url.length;
var fileSize =(imgLen-(imgLen/8)*2)/1024/1024; //MB
if (fileSize<2){
callback(url);
return true;
}else{
alert("图片大小不能超过2M");
return false;
};
};
reader.onabort=function(){
return false;
}
return false;
};
$("#profile_pic").change(function(){
var that =this;
var father = $(that).parents("dl");
getObjectURL(that,function(SRC){
return SRC & father.find(".pic_user").attr("src", SRC) ;
});