记录图片上传功能

本文只是为了记录最近开发的项目图片上传功能图片校验，浏览器兼容问题这个是最烦人的了。记录前端开发中遇到了烦人事。

用于校验浏览器
var B = {  
        IE : /MSIE/.test(window.navigator.userAgent) && !window.opera  
        , FF : /Firefox/.test(window.navigator.userAgent)  
        , OP : !!window.opera  
}; 

// 校验图片大小和后缀名obj标识file,imgSize 标识你支持图片上传的大小(单位KB),errorInfo 标识提示错误信息
function checkImage(obj,imgSize,errorInfo){
	var filePath = $(obj).val();
	var suff = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
	var bannerUrl = document.getElementById("bannerUrl").value;
	$("#imglocation").html(bannerUrl);
	if(suff != ".jpg" && suff != ".jpeg" && suff != ".png" && suff != ".gif"){
		$("#"+errorInfo).html("<em class='tipFalse5'></em>对不起你选择的图片类型不符合要求");
		return false;
	}
	
	var file_size = 0;
	//判断是否为IE浏览器
	if(B.IE){
		var img = new Image();
		img.onreadystatechange = function(){
			if (img.readyState =="complete") {
				if (img.fileSize > 0) {
					var nums = img.fileSize/1024;
					var st = nums.toFixed(2);
					if (st > imgSize) {
						$("#"+errorInfo).html("<em class='tipFalse5'></em>对不起你选择的图片大小不符合要求");
						return false;
					} else {
						$("#"+errorInfo).html("");
					}
				} 
			 }
		 }
		 img.src = $(obj).val();
	} else {
		file_size = obj.files[0].size;
		var num01 = file_size / 1024;
		var num02 = num01.toFixed(2);
		if(num02 > imgSize){
			$("#"+errorInfo).html("<em class='tipFalse5'></em>对不起你选择的图片大小不符合要求");
			return false;
		} else {
			$("#"+errorInfo).html("");
		}
	}
	return true;
}

开始开发图片大小验证的时候出现了一个隐藏的bug，有的图片可以，有的图片不可以，图片大小在你控制的范围内。

1.我上传图片大小传入的值是50KB,我传入一个100KB的图片他会报错,正常显示,再次选择一个小于50KB的也没有问题,选择一个170KB在选择一个5KB的图片这个时候选择5KB的图片就无法校验了，debug前端发现没有走img.onreadystatechange = function(){}这部分代码，那个时候我代码是如下(上述描述都是在IE浏览器下面)

var img = new Image();
img.src = $(obj).val();
img.onreadystatechange = function(){
if (img.readyState =="complete") {
    if (img.fileSize > 0) {
        var nums = img.fileSize/1024;
        var st = nums.toFixed(2);
        if (st > imgSize) {
           $("#"+errorInfo).html("<em class='tipFalse5'></em>对不起你选择的图片大小不符合要求");
           return false;
        } else {
           $("#"+errorInfo).html("");
        }
     } 
}
}

当创建Image()后我就开始给img.src赋值了,导致了上面的情况。这部分没有搞懂为什么会这样。