js实现上传文件大小限制，兼容IE、Firefox、Chrome

功能说明：通过input:file标签onchange事件，在前端限制用户上传的文件必须小于2M，兼容IE、Firefox、Chrome。

函数说明：

• validBrowser() 判断浏览器类型，因为IE浏览器和Firefox、Chrome获取文件大小的方式不同。  
• checkfilesize(dom) 通过input标签onchange事件判断文件大小，超过2M则取消上传。
• clearInputFile(dom) 经过测试发现，onchange事件return false并不能阻止上传，需将input值清空才可以。

重点：

• navigator.userAgent.indexOf('MSIE') > -1只能判断IE11以下的版本，因为IE11的头文件已经不包含'MSIE'了。
• IE浏览器由于安全限制不能通过js改变input:file的value值，采用创建一个新的input标签替换原来的的方式。

不足：IE浏览器需降低安全级别才能进行文件大小判断，网上有做法是利用img的dynsrc属性，但只在IE6有效。

主要代码：

<input type="file" name="" onchange="checkfilesize(this)" />

//文件大小限制
function checkfilesize(dom){
	var filePath = dom.value;
	var maxsize = 2*1024*1024;//2M  
	var errMsg = "上传失败：文件大小不能超过2M！";  
	var tipMsg = "您的浏览器暂不支持计算上传文件的大小，建议使用IE、FireFox、Chrome浏览器。";  
	var browserCfg = validBrowser();  //获取浏览器类型
	
    try{  
        if(filePath == ""){  
            return;  
        }  
        var filesize = 0;  
        if(browserCfg.isFirefox || browserCfg.isChrome ){  
            filesize = dom.files[0].size;  
        }else if(browserCfg.isIE){  
        	var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
        	var file = fileSystem.GetFile (filePath);
        	filesize = file.Size; 
        }else{  
        	alert(tipMsg);  
        	clearInputFile(dom);
            return; 
        }  
        if(filesize == -1){  
        	alert(tipMsg);  
        	clearInputFile(dom);
            return; 
        }else if(filesize > maxsize){  
        	alert(errMsg);  
        	clearInputFile(dom);
            return false; 
        }else{  
            return;  
        }  
    }catch(e){  
        alert(e);  
    }  
} 
//超过大小，取消上传，input值清空
function clearInputFile(dom){  
    if(dom.value){  
        try{  
        	dom.value = ''; //for IE11, latest Chrome/Firefox/Opera...  
        }catch(err){  
        }  
        if(dom.value){ //for IE5 ~ IE10  
            var form = document.createElement('form'), ref = dom.nextSibling, p = dom.parentNode;  
            form.appendChild(dom);  
            form.reset();  
            p.insertBefore(dom,ref);  
        }  
    }  
}
//获取浏览器类型
function validBrowser(){ 
	var browserCfg = {};
	var u_agent = navigator.userAgent; 
	browserCfg.name = 'Failed to identify the browser'; 
	if(u_agent.indexOf('Firefox') > -1){ 
		browserCfg.name = 'Firefox'; 
		browserCfg.isFirefox = true;
	}else if(u_agent.indexOf('Chrome') > -1){ 
		browserCfg.name = 'Chrome'; 
		browserCfg.isChrome = true;
	}else if(u_agent.indexOf('Trident') > -1 && u_agent.indexOf('rv:11') > -1){ 
		browserCfg.name = 'IE11'; 
		browserCfg.isIE = true;
	}else if(u_agent.indexOf('MSIE') > -1 && u_agent.indexOf('Trident') > -1){ 
		browserCfg.name = 'IE(8-10)'; 
		browserCfg.isIE = true;
	}else if(u_agent.indexOf('MSIE') > -1){ 
		browserCfg.name = 'IE(6-7)';
		browserCfg.isIE = true;
	}else if(u_agent.indexOf('Opera') > -1){ 
		browserCfg.name = 'Opera'; 
	}else{ 
		browserCfg.name += ',info:' + u_agent; 
	} 
	return browserCfg;
} 

 

转载于:https://my.oschina.net/u/3245427/blog/912902