js限制本地上传文件大小（支持ie6,7,8 firefox 谷歌）

<script type="text/javascript">  
    function onUploadImgChange(fileInput) {  
        var filePath = fileInput.value;  
        var fileExt = filePath.substring(filePath.lastIndexOf("."))  
                .toLowerCase();  
  
        if (!checkFileExt(fileExt))  
  
        {  
            alert("您上传的文件不是图片,请重新上传！");  
            return;  
        }  
		//火狐
        if (fileInput.files && fileInput.files[0]) {  
            //alert(fileInput);  
           // alert(fileInput.files[0])  
           // alert('你选择的文件大小' + fileInput.files[0].size);  
			if(fileInput.files[0].size>(2*1024*1024)){
				alert('您上传的图片超过大小，请重新上传');
				return;
			}
            //var xx = fileInput.files[0];  
            //for ( var i in xx) {  
             //   alert(xx[i])  
            //}  
        } else {  
			var agent = window.navigator.userAgent; 
			var isIE7 = agent.indexOf('MSIE 7.0') != -1;
			var isIE8 = agent.indexOf('MSIE 8.0') != -1; 
			//IE7和IE8获得文件路径
			if (isIE7 || isIE8) { 
				fileInput.select();  
				var url = document.selection.createRange().text;  
				try {  
					var fso = new ActiveXObject("Scripting.FileSystemObject");  
				} catch (e) {  
					alert('如果你用的是ie 请将安全级别调低！');  
				}  
				//alert("文件大小为：" + fso.GetFile(url).size); 
				var ie_size = fso.GetFile(url).size;
			}else{
				//ie6
				var oFileChecker = document.getElementById("fileChecker");
				oFileChecker.src = filePath;
				oFileChecker.onreadystatechange = function ()
				{
					if (oFileChecker.readyState == "complete")
					{
						var limit  = 2 * 1024*1024;
						//alert(oFileChecker.fileSize)
						if (oFileChecker.fileSize > limit){
							alert("您上传的图片超过大小，请重新上传");
						}else{
							//alert("ok");
						}
					}
				}
			}
			if(ie_size>(2*1024*1024)){
				alert('您上传的图片超过大小，请重新上传');
				return;
			}
        }  
    }  
    function checkFileExt(ext)  
  
    {  
        if (!ext.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {  
            return false;  
        }  
        return true;  
    }  
</script> 

 

<!--验证图片用--->
<img src="about:blank" id="fileChecker" name="fileChecker" alt="test" style="display:none;"  height="18"/>

<input  type="file" onchange="onUploadImgChange(this)" value="浏 览">

 

客户端验证上传文件大小,在IE下面可以很简单，但是需要修改ActiveX安全设置。同时火狐不支持ActiveX。于是这个问题就变得棘手了。 解决这个问题的直接思路：1.获得文件路径以后使用AJAX验证文件大小；2.查看浏览器内部属性方法看看到底是否支持读取本地文件大小。

第一种思路：首先获取上传控件的值（这个值就是上传文件在本地的路径），通过AJAX在后台可以轻易的得到文件详细信息，之后再利用回调函数做一些 处理工作。这种思路的关键在于--如何得到这个文件路径。稍微有点经验的人都知道，通过上传控件的id.value是得不到真实的文件路径，ie7和 ie8在路径里面加入了fakepath（只能看见盘符、fakepath、文件名）而火狐更狠，直接得到的是文件名。当然上述结论对IE6无效。

于是这个思路还需要好好研究，探索一番发现IE7和IE8获得文件路径还是有方法的：fileupload.select();
var path=document.selection.createRange().text。
这 个方法还没有仔细研究，从字面上看似乎是先把控件选择，然后再通过某种方式把选中的值找出来。。。（~~，知道的人顺便告知下）。这下子就只需要搞定火狐 了。baidu发现火狐获取路径还很麻烦，涉及到编码问题，找了几个答案都说得不明不白。闲话一段：感觉搜索引擎搜索专业问题都很无能为力，baidu如 此，google也如此。不过这也说明了搜索引擎的未来还可以变得更好。无奈之下转向第二种思路：查看各浏览器的内部实现，看看是不是有什么方法或者属性 直接读取上传文件的大小。首先在IE8的开发人员工具下断点调试，对fileupload的属性和方法一个个的找，毫无悬念的无果。于是不免叹气，IE7 和IE8都居然对JS访问本地文件做出这么严格的限制，想当然地以为火狐肯定也不行！但是还是不死心，还是找找看。于是拿起FireBug又是一番调试， 果然皇天不负有心人，最后终于让哥找到了这个属性： var size=fileupload.files[0].fileSize;

原来火狐居然可以直接读出文件大小，令人惊叹啊！

评论

1 楼 kely39 2016-08-12  

不可能让所有用户都去设置IE8安全级别吧，这方法不明智。