限制上传文件的大小

HTML

<div class="form-group">
    <label class="col-sm-3 col-sm-6 control-label">图片</label>
    <span class="problem-must"></span>
    <div class="col-sm-8">
        <a class="fb-upload" href="javascript:void(0);"> 
            <input class="form-control" name="pic" type="file" accept=".gif,.jpg,.png,.jpeg" /> 
            <span class="fb-img">上传图片</span>
	</a>
    </div>
</div>

css(仿bootstrap的input样式)

.fb-img{ 
    color: gray;
    display: inline-block;
    padding: 6px 12px;
    text-align: left;
    border:1px solid #ccc;
    border-radius:4px;
    height:34px;
    line-height:1.42857;
    width:100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    }
.form-group input[type="file"]{
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    }

js

var maxsize = 2*1024*1024;//2M  
var errMsg = "上传的图片不能超过2M!!!";  
var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传图片不要超过2M,建议使用IE、FireFox、Chrome浏览器。"; 
var  browserCfg = {};  
var ua = window.navigator.userAgent;  
if (ua.indexOf("MSIE")>=1){  
	browserCfg.ie = true;  
}else if(ua.indexOf("Firefox")>=1){  
	browserCfg.firefox = true;  
}else if(ua.indexOf("Chrome")>=1){  
	browserCfg.chrome = true;  
}
$(".fb-upload").on("change","input[type='file']",function(){
	var filePath = $(this).val();
	var arr = filePath.split('\\');
	var fileName = arr[arr.length-1];
	var filesize = 0;  
	if(browserCfg.firefox || browserCfg.chrome ){  
		filesize = $(this)[0].files[0].size;  
	}else if(browserCfg.ie){  
		var obj_img = new Image();  
		obj_img.dynsrc = fileName;  
		filesize = obj_img.fileSize;  
	}else{
		alert(tipMsg);
		return;  
	}
	if(filesize ==-1){  
		alert(tipMsg);
		return;  
	}else if(filesize > maxsize){
		
		alert(errMsg);
		return;  
	}else{
		$(".fb-img").html("");
		$(".fb-img").html(fileName);
		$(".fb-img").css({"color":"#555"});
		return;  
	}
});