• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 使用jQuery实现验证上传图片的格式与大小

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

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jQuery,验证上传图片,格式,大小等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

废话少说,直接上代码

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

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 利用jQuery实现可以编辑的表格
  • jquery背景跟随鼠标滑动导航
  • jQuery插件zTree实现的基本树与节点获取操作示例
  • jquery 追加tr和删除tr示例代码
  • jQuery使用手册之一
  • javascript特殊用法示例介绍
  • jQuery中add实现同时选择两个id对象
  • jquery radio 操作代码
  • jquery ajax提交整个表单元素的快捷办法
  • jquery 插件实现多行文本框[textarea]自动高度

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery Dialog对话框事件用法实例分析
    • jquery.validate表单验证插件使用详解
    • JQuery插件开发示例代码
    • jQuery中阻止冒泡事件的方法介绍
    • jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
    • jQuery实现在下拉列表选择时获取json数据的方法
    • jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
    • jQuery插件实现带圆点的焦点图片轮播切换
    • jquery uploadify 在FF下无效的解决办法
    • jQuery数据检索中根据关键字快速定位GridView指定行的实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有