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