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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
理解AngularJs指令
Dec 10 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 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中实现crontab代码分享
2015/03/26 PHP
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
Node.js模块加载详解
2014/08/16 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
详解Python3定时器任务代码
2019/09/23 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
土木工程师岗位职责
2013/11/24 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
中学生英语演讲稿
2014/04/26 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
计算机软件专业求职信
2014/06/10 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
借名购房协议书范本
2014/10/06 职场文书
向女朋友道歉的话
2015/01/20 职场文书
观后感开头
2015/06/19 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
PHP中多字节字符串操作实例详解
2021/08/23 PHP
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android