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 相关文章推荐
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
javascript实现数独解法
Mar 14 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
vue删除html内容的标签样式实例
Sep 13 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python random模块常用方法
2014/11/03 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python最小二乘法矩阵
2019/01/02 Python
Linux内核产生并发的原因
2012/07/13 面试题
大众服装店创业计划书范文
2014/01/01 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
安全横幅标语
2014/06/09 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
初中运动会前导词
2015/07/20 职场文书
环保建议书范文
2015/09/14 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL