js實現上傳文件大小限制,兼容IE、Firefox、Chrome

功能說明:經過input:file標籤onchange事件,在前端限制用戶上傳的文件必須小於2M,兼容IE、Firefox、Chrome。javascript

函數說明:html

  • 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有效。java

主要代碼:瀏覽器

<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;
}
相關文章
相關標籤/搜索