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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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下使用iconv需要注意的问题
2010/11/20 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
node.js实现上传文件功能
2019/07/15 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
django 模型中的计算字段实例
2020/05/19 Python
python 实现aes256加密
2020/11/27 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
入党思想汇报
2014/01/05 职场文书
车辆年审委托书范本
2014/09/18 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
七年级数学教学反思
2016/02/17 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js