客户端验证上传图片的大小（兼容IE和火狐）

来源：互联网发布：mac web压力测试工具编辑：程序博客网时间：2024/05/16 06:46

做web开发的哥们都会遇到批量上传图片的需求，相信大家都会遇到这样的问题，当选择好要上传的图片，提交服务器后，发现有图片的大小超过了系统允许的范围。从而不得不返回来重新上传过；就算是那些没有超过大小的也要重新在选择一遍。上传一张还好，要是批量上传10、或者20等等，而只因为其中一张图片的大小超过了系统允许的范围，结果就又要重新选择，这个时候人的心情就可想而知了，——这真是“一颗老鼠屎坏了一锅粥”。而且也严重影响了用户体验！

难道就没有一个好的方法吗？能在客户端就能验证用户上传的图片的大小，使用户每选择一个要上传的图片，就能知道该图片是否符合，能让用户及时地“知错能改”！这样就可以把“错误”扼杀在“萌芽”状态。这样是不是用户体验也更上一层楼了啊！好了，废话不说了，直接切入主题吧！

客户端验证图片的大小，大家可能会想到js中的FileSystemObject 对象，诚然，该对象可以对本地文件系统进行访问。

代码如下（假设要访问的图片地址为C://picture.jpg）：

var fso = new ActiveXObject("Scripting.FileSystemObject");
var file = fso.GetFile("C://picture.jpg"); // 获得文件对象
alert("文件大小=" + file.Size); // 输出图片的大小（单位为字节）

但此段代码，只能在IE中执行，在火狐中却不起作用，原因是火狐中不存在FileSystemObject 对象。而且在IE中通过此段代码去获得文件信息的时候，IE总会弹出一个脚本安全提示的框，让用户去选择。这样的话，虽然在客户端获得了上传的图片的大小，但却每次执行此段代码的时候都会弹出一个框，用户体验是不是会更糟啊！想想要是上传10个的话，那不是用户要点击“确定”10次啊！这样的话，岂不是“捡了芝麻丢了西瓜”嘛！而且还与火狐不兼容！难到就没有其他方法了吗？在此，在下就介绍自己总结的一种能兼容IE和火狐的方法。

大家可以拷这段代码到本地测试一下（本人在IE7和火狐3.0上通过，此段代码还有预览图像的功能哦）。

</head>

<body>
系统允许的大小:<input type="text" size="4" value="800" name="fileSizeLimit" id="fileSizeLimit"/> K
<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>
<img src="about:blank" id="fileChecker" alt="test" height="180"/>

    oFileChecker.src = document.getElementById('file1').files[0].getAsDataURL();
    oFileChecker.addEventListener('load', function(){isFFCompleted(document.getElementById('file1').files[0]);}, false);

}else{ // IE

oFileChecker.src = filePicker.value;
oFileChecker.attachEvent("onreadystatechange", function(){isIECompleted(oFileChecker);});
}
}

function isIECompleted(fileObj){

if (oFileChecker.readyState == "complete")
{
checkSize(fileObj);
}
}

只要把一上的代码稍加修改，就可以应用到大家的系统中了。此代码的巧妙之处就是额外的增加了一个IMG元素。它用于把用户选择的图片得以加载进来，从而从页面而不是从文件系统中获得此图片对象（这样浏览器也就不会弹出什么安全提示框来了）。