做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上通过，此段代码还有预览图像的功能哦）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传图片客户端预览及大小判断，支持IE火狐</title>
</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"/> <!--巧妙之处-->
<script type="text/javascript">
var oFileChecker = document.getElementById("fileChecker");
function changeSrc(filePicker)
{
if(window.addEventListener){ // FF
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);
}
}
function isFFCompleted(fileObj){
if ( oFileChecker.complete )
{
checkSize(fileObj);
}
}
function checkSize(fileObj)
{
var limit = document.getElementById("fileSizeLimit").value * 1024;
if (fileObj.fileSize > limit)
{
alert("文件太大");
}
else
{
alert("文件正确");
}
}
</script>
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/rj042/archive/2009/08/15/4448298.aspx
