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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
七年级地理教学反思
2014/01/26 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
幼儿教师求职信
2014/05/24 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
Python数据类型最全知识总结
2021/05/31 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Elasticsearch 批量操作
2022/04/19 Python