功能說明:經過input:file標籤onchange事件,在前端限制用戶上傳的文件必須小於2M,兼容IE、Firefox、Chrome。javascript
函數說明:html
重點:前端
不足: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; }