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


Posted in jQuery onApril 11, 2018

本文实例讲述了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实现图片轮播器
May 23 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 #jQuery
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 #jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
You might like
php生成图形验证码几种方法小结
2013/08/15 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
python如何操作mysql
2020/08/17 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
python中count函数知识点浅析
2020/12/17 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
捷科时代的软件测试笔试题
2015/11/09 面试题
电脑销售顾问自荐信
2014/01/29 职场文书
市场营销工作计划书
2014/09/15 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年消防工作总结
2014/11/21 职场文书
社区元宵节活动总结
2015/02/06 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
Java 异步任务计算FutureTask
2022/04/28 Java/Android