使用jQuery实现验证上传图片的格式与大小


Posted in Javascript onDecember 03, 2014

代码很简单,常见的图片格式均已加入验证之中,小伙伴们可以直接拿去用的。

废话少说,直接上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  $(document).ready(function(){

  $("#form01").change( function(){

  var filepath=$("input[name='myFile']").val();

  var extStart=filepath.lastIndexOf(".");

  var ext=filepath.substring(extStart,filepath.length).toUpperCase();

  if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){

  alert("图片限于bmp,png,gif,jpeg,jpg格式");

  return false;

  }else{$("#name01").text(ext)}

  var file_size = 0;

  if ( $.browser.msie) {

  var img=new Image();

  img.src=filepath;

  while(true){

  if(img.fileSize > 0){

  if(img.fileSize>3*1024*1024){

  alert("图片不大于100MB。");

  }else{

  var num03 = img.fileSize/1024;

  num04 = num03.toFixed(2)

  $(".size02").text(num04+"KB");

  }

  break;

  }

  }

  } else {

  file_size = this.files[0].size;

  console.log(file_size/1024/1024 + " MB");

  var size = file_size / 1024;

  if(size > 10240){

  alert("上传的文件大小不能超过10M!");

  }else{

  var num01 = file_size/1024;

  num02 = num01.toFixed(2)

  $("#size01").text(num02 + " KB");

  }

  }

  return true;

  });

  });

  </script>

  <title>无标题文档</title>

  </head>

  <body>

  <table width="500" cellspacing="0" cellpadding="0">

  <tr>

  <td width="72" id="name01"> </td>

  <td width="242"><input type="file" name="myFile" id="form01" /></td>

  <td width="184" id="size01" class="size02"> </td>

  </tr>

  </table>

  </body>

  </html>

以上代码超级简单,小伙伴们使用的时候自己记得美化下,这里就不多做解释了。

Javascript 相关文章推荐
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 #Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 #Javascript
JS逆序遍历实现代码
Dec 02 #Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 #Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 #Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 #Javascript
javascript框架设计读书笔记之种子模块
Dec 02 #Javascript
You might like
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
php封装的page分页类完整实例
2016/10/18 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python解决八皇后问题示例
2018/04/22 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
详解python:time模块用法
2019/03/25 Python
使用python去除图片白色像素的实例
2019/12/12 Python
django 模版关闭转义方式
2020/05/14 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
python 实现IP子网计算
2021/02/18 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
期中考试反思800字
2014/05/01 职场文书
高中教师考核方案
2014/05/18 职场文书
庆七一活动总结
2014/08/27 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
公司管理制度范本
2015/08/03 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers