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

原创
2017/06/02 00:02
阅读数 4.2K

功能说明:通过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;
} 

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部