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插件
Mar 29 jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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创建动态图像
2006/10/09 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python中Flask框架简单入门实例
2015/03/21 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
python matplotlib库的基本使用
2020/09/23 Python
C语言笔试题回忆
2015/04/02 面试题
.NET概念性的面试题
2012/02/29 面试题
党员示范岗材料
2014/12/19 职场文书
七一慰问简报
2015/07/20 职场文书
三好学生竞选稿
2015/11/21 职场文书
《植树问题》教学反思
2016/03/03 职场文书