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 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
微信小程序实现评论功能
Nov 28 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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
mysql5详细安装教程
2007/01/15 PHP
PHP与SQL注入攻击[二]
2007/04/17 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
jquery封装的对话框简单实现
2013/07/21 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
详解jQuery事件
2017/01/13 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
django用户登录验证的完整示例代码
2019/07/21 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
超市总经理岗位职责
2014/02/02 职场文书
中学清明节活动总结
2014/07/04 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
幼儿教师个人总结
2015/02/05 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
警告通知
2015/04/25 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
导游词之日月潭
2019/11/05 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技