JS限制上传图片大小不使用控件在本地实现


Posted in Javascript onDecember 19, 2012

文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件。使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果...//允许上传图片文件的大小
具体代码如下
JS限制上传图片大小不使用控件在本地实现 

<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>

<完>
注意读者可以直接复制以上代码,另存为HTML文件里,预览JS限制上传图片大小效果
Javascript 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 #Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 #Javascript
ajax java 实现自动完成功能
Dec 19 #Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 #Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 #Javascript
javascript jscroll模拟html元素滚动条
Dec 18 #Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php短址转换实现方法
2015/02/25 PHP
提高php编程效率技巧
2015/08/13 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
通过js获取div的background-image属性
2013/10/15 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
浅谈webpack对样式的处理
2018/01/05 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
大专生简历的自我评价
2013/11/26 职场文书
租房协议书
2014/09/12 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
MySql开发之自动同步表结构
2021/05/28 MySQL
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python