上传图片并限制大小

需求:图片上传,要求图片base64大小不超过2MB

注意:图片上传需要本地环境,需要安装node,然后安装live-server,在文件目录打开命令行,运行live-server即可;基于框搭建的项目忽略这个问题。
HTML

<!-- 头像 -->
<dl class="clearfix">
	 <dt>&emsp;&emsp;</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) ;
	});	
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值