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 相关文章推荐
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
npm的lock机制解析
Jun 20 Javascript
原生js实现3D轮播图
Mar 21 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
微信小程序实现锚点功能
Nov 20 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使用正则过滤js脚本代码实例
2014/05/10 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php数组和链表的区别总结
2019/09/20 PHP
Prototype Array对象 学习
2009/07/19 Javascript
Javascript Math对象
2009/08/13 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
python获取图片颜色信息的方法
2015/03/18 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python实现队列的方法
2015/05/26 Python
Python判断字符串与大小写转换
2015/06/08 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
RealTek面试题
2016/06/28 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
大学活动总结格式
2014/04/29 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
个人工作年终总结
2015/03/09 职场文书
关于运动会的广播稿
2015/08/19 职场文书
python 如何用terminal输入参数
2021/05/25 Python
实战Python爬虫爬取酷我音乐
2022/04/11 Python