脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery判断上传图片类型和大小

jQuery实现判断上传图片类型和大小的方法示例

 更新时间：2018年04月11日 14:43:02   作者：kongjunchao159  
这篇文章主要介绍了jQuery实现判断上传图片类型和大小的方法,结合实例形式分析了jQuery针对上传图片属性获取、判定相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现判断上传图片类型和大小的方法。分享给大家供大家参考，具体如下：

这里使用jQuery判断上传图片的类型和大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="" method="">
  <input type="file" id="file" />
</form>
<p id="p_1">图片格式为：</p>
<p id="p_2">图片大小为：</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  var p_1 = $('#p_1'),
    p_2 = $('#p_2');
  $('body').on('change','#file',function(){
    var path = $(this).val(),
    extStart = path.lastIndexOf('.'),
    ext = path.substring(extStart,path.length).toUpperCase();
    //判断图片格式
    if(ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){
      alert('请上传正确格式的图片');
      resetFile();
      return false;
    }else{
      p_1.html('图片格式为：' + ext);
    }
    //获取图片大小，注意使用this，而不是$(this)
    var size = this.files[0].size / 1024;
    if(size > 10240){
      alert('图片大小不能超过10M');
      resetFile();
      return false;
    }else{
      p_2.html('图片大小为：' + size.toFixed(2) + 'KB');
    }
  })
  //还原
  function resetFile(){
    //清空file表单的值，不能直接使用$('#file').val('')这种写法
    $('form').html('<input type="file" id="file" />');
    p_1.html('图片格式为：');
    p_2.html('图片大小为：');
  }
})
</script>
</body>
</html>

lastIndexOf()方法从后向前检索指定字符串，如果出现了指定的字符，则返回该字符所在的位置，如果没有，返回-1，位置从0开始计数

toUpperCase()方法转换成大写字母

substring()方法截取字符串，第一个参数为开始的位置，第二个参数为结束的位置（如果省略，则默认会截取到字符串的结尾），与slice()和substr()方法不同的是，substring()不接受负的参数

slice()方法同substring()方法，区别是接受负的参数（若参数为负数，则从字符串尾部开始计算位置）

substr()方法截取字符串，第一个参数是开始的位置，第二个参数是截取的长度（不同于slice和substring），现已不建议使用

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jquery实现列表上下移动功能

    jquery实现列表上下移动功能

    这篇文章主要为大家详细介绍了jquery 实现列表上移、下移功能的相关资料，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • jquery mobile实现拨打电话功能的几种方法

    jquery mobile实现拨打电话功能的几种方法

    在做一个便民服务电话，用到移动web中列出的电话，点击需要实现调用通讯录，拨打电话功能，有需要的朋友可以参考一下
    2013-08-08
  • jquery.Jwin.js 基于jquery的弹出层插件代码

    jquery.Jwin.js 基于jquery的弹出层插件代码

    测试页面需要引用jquery的js文件 插件文件jquery.Jwin.js jquery.Jwin插件的使用参数都有详细说明
    2012-05-05
  • jQuery实现隔行背景色变色

    jQuery实现隔行背景色变色

    这篇文章给大家分享了jQuery实现隔行背景色变色的代码，有相同需要的小伙伴参考下吧
    2014-11-11
  • jQuery 图像裁剪插件Jcrop的简单使用

    jQuery 图像裁剪插件Jcrop的简单使用

    目前做的这个项目中要用到用户头像功能，领导说最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。
    2009-05-05
  • JQuery小知识

    JQuery小知识

    我们通常在执行一次ajax请求过后，需要更新界面上的某些内容，一般通过动态插入dom元素。
    2010-10-10
  • easyui取消表单实时验证,提交时统一验证的简单实例

    easyui取消表单实时验证,提交时统一验证的简单实例

    下面小编就为大家带来一篇easyui取消表单实时验证,提交时统一验证的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 一文带你详细了解jQuery

    一文带你详细了解jQuery

    jQuery是一个JavaScript库，它简化了客户端JavaScript编程的过程，特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。感兴趣的小伙伴可以参考阅读
    2023-04-04
  • jQuery 实现左右两侧菜单添加、移除功能

    jQuery 实现左右两侧菜单添加、移除功能

    本文通过实例代码给大家分享了jQuery 实现左右两侧菜单添加、移除功能，需要的朋友参考下吧
    2018-01-01
  • jQuery插件MixItUp实现动画过滤和排序

    jQuery插件MixItUp实现动画过滤和排序

    MixItUp过滤排序jQuery插件是一款鼠标滑过图片显示描述的jQuery过滤排序插件。是一款轻量，但功能强大的 jQuery 插件，提供了对分类和有序内容的美丽的动画过滤和排序功能。特别适合用于作品集网站，画廊，图片博客以及任何的分类或有序内容。
    2015-04-04

最新评论