js图片处理示例代码


Posted in Javascript onMay 12, 2014
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 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; //返回 
} 
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) 
{ 
FileObj.outerHTML=FileObj.outerHTML; 
MsgList.innerHTML=msg; 
HasChecked=false; 
}else{ 
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="文件信息处理中..."; 
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; 
alert(ImgObj.src); 
alert(Math.round(ImgObj.fileSize/1024*100)/100); 
CheckProperty(obj); 
return false; 
}else{ 
FileMsg="\n文件扩展名:"+FileExt; 
ShowMsg(FileMsg,true); 
} 
}
Javascript 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
jquery实现的一个简单进度条效果实例
May 12 #Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 #Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 #Javascript
Jquery Ajax方法传值到action的方法
May 11 #Javascript
json的定义、标准格式及json字符串检验
May 11 #Javascript
Jquery操作js数组及对象示例代码
May 11 #Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 #Javascript
You might like
PHP判断是否为空的几个函数对比
2015/04/21 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
Node.js文件操作详解
2014/08/16 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python实现Decorator模式实例代码
2018/02/09 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
django使用JWT保存用户登录信息
2020/04/22 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
园林资料员岗位职责
2013/12/30 职场文书
党校学习自我鉴定
2014/02/24 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
毕业设计致谢词
2015/05/14 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis