使用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 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python实现xml转json文件的示例代码
2020/12/30 Python
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
公司中层干部的自我评价分享
2014/03/01 职场文书
工程管理英文求职信
2014/03/18 职场文书
优秀广告词大全
2014/03/19 职场文书
中学生检讨书范文
2014/11/03 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python