JS 文件大小判断的实现代码


Posted in Javascript onApril 07, 2010

方法一,利用ActiveX控件实现:

<script type="text/javascript"> 
function getFileSize(filePath) 
{ 
var fso = new ActiveXObject("Scripting.FileSystemObject"); 
alert("文件大小为:"+fso.GetFile(filePath).size); 
} 
</script> 
<body> 
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value);"> 
</body>

这个方法在IE可以用,不足之处会有安全提示,把文件名改为.hta则会屏蔽掉安全提示。
方法二,利用img的dynsrc属性:
<script type="text/javascript"> 
function getFileSize(filePath) 
{ 
var image=new Image(); 
image.dynsrc=filePath; 
alert(image.fileSize); 
} 
</script> 
<body> 
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)"> 
</body>

这个方法在IE6可以用,在IE7,IE8,Firefox,chrome不能用。
方法三,利用img的fileSize:
<script language=javascript> 
var ImgObj=new Image(); //建立一个图像对象 
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性 
//以下为限制变量 
var AllowExt=".jpg|.gif|.doc|.txt|" //允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示 
//var AllowExt=0 
var AllowImgFileSize=70; //允许上传图片文件的大小 0为无限制 单位:KB 
var AllowImgWidth=500; //允许上传的图片的宽度 ?为无限制 单位:px(像素) 
var AllowImgHeight=500; //允许上传的图片的高度 ?为无限制 单位:px(像素) 
HasChecked=false; 
function CheckProperty(obj) //检测图像属性 
{ 
FileObj=obj; 
if(ErrMsg!="") //检测是否为正确的图像文件 返回出错信息并重置 
{ 
ShowMsg(ErrMsg,false); 
return false; //返回 
} 
if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测 
{ 
setTimeout("CheckProperty(FileObj)",500); 
return false; 
} 
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小 
ImgWidth=ImgObj.width //取得图片的宽度 
ImgHeight=ImgObj.height; //取得图片的高度 
FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px"; 
FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb"; 
FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt; 
if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth) 
ErrMsg=ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+AllowImgWidth+"px的文件,当前图片宽度为"+ImgWidth+"px"; 
if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) 
ErrMsg=ErrMsg+"\n图片高度超过限制。请上传高度小于"+AllowImgHeight+"px的文件,当前图片高度为"+ImgHeight+"px"; 
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) 
ErrMsg=ErrMsg+"\n图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件,当前文件大小为"+ImgFileSize+"KB"; 
if(ErrMsg!="") 
ShowMsg(ErrMsg,false); 
else 
ShowMsg(FileMsg,true); 
} 
ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'} 
function ShowMsg(msg,tf) //显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容 
{ 
msg=msg.replace("\n","<li>"); 
msg=msg.replace(/\n/gi,"<li>"); 
if(!tf) 
{ 
document.all.UploadButton.disabled=true; 
FileObj.outerHTML=FileObj.outerHTML; 
MsgList.innerHTML=msg; 
HasChecked=false; 
} 
else 
{ 
document.all.UploadButton.disabled=false; 
if(IsImg) 
PreviewImg.innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>" 
else 
PreviewImg.innerHTML="非图片文件"; 
MsgList.innerHTML=msg; 
HasChecked=true; 
} 
} 
function CheckExt(obj) 
{ 
ErrMsg=""; 
FileMsg=""; 
FileObj=obj; 
IsImg=false; 
HasChecked=false; 
PreviewImg.innerHTML="预览区"; 
if(obj.value=="")return false; 
MsgList.innerHTML="文件信息处理中..."; 
document.all.UploadButton.disabled=true; 
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //判断文件类型是否允许上传 
{ 
ErrMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件,当前文件类型为"+FileExt; 
ShowMsg(ErrMsg,false); 
return false; 
} 
if(AllImgExt.indexOf(FileExt+"|")!=-1) //如果图片文件,则进行图片信息处理 
{ 
IsImg=true; 
ImgObj.src=obj.value; 
CheckProperty(obj); 
return false; 
} 
else 
{ 
FileMsg="\n文件扩展名:"+FileExt; 
ShowMsg(FileMsg,true); 
} 
} 
function SwitchUpType(tf) 
{ 
if(tf) 
str='<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;">' 
else 
str='<input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;">' 
document.all.file1.outerHTML=str; 
document.all.UploadButton.disabled=true; 
MsgList.innerHTML=""; 
} 
</script> 
<form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;"> 
<fieldset style="width: 372; height: 60;padding:2px;"> 
<legend><font color="#FF0000">图片来源</font></legend> 
<input type="radio" name="radio1" checked onclick="SwitchUpType(true);">本地<input type="radio" name="radio1" onclick="SwitchUpType(false);">远程:<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;"> <input type="submit" id="UploadButton" value="开始上传" disabled> 
<div style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;"> 
<table border="0"><tr><td width="60" id="PreviewImg">预览区</td><td id="MsgList" valign="top"></td></tr></table> 
</div> 
</fieldset> 
</form>

在IE,FireFox,chrome都可以用,不过只判断图片文件的大小。
Javascript 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 #Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 #Javascript
offsetParent 算法分析
Apr 05 #Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 #Javascript
jQuery 技巧小结
Apr 02 #Javascript
jquery 页面全选框实践代码
Apr 02 #Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 #Javascript
You might like
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
javascript 保存文件到本地实现方法
2012/11/29 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python对excel的基本操作方法
2021/02/18 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
阿德的梦教学反思
2014/02/06 职场文书
反邪教警示教育方案
2014/05/13 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL