jQuery简单验证上传文件大小及类型的方法


Posted in Javascript onJune 02, 2016

本文实例讲述了jQuery简单验证上传文件大小及类型的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#myFile").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格式");
          $("#fileType").text("")
          $("#fileSize").text("");
          return false;
        } else { $("#fileType").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)
                $("#fileSize").text(num04 + "KB");
              }
              break;
            }
          }
        } else {
          file_size = this.files[0].size;
          var size = file_size / 1024;
          if (size > 10240) {
            alert("上传的图片大小不能超过10M!");
          } else {
            var num01 = file_size / 1024;
            num02 = num01.toFixed(2);
            $("#fileSize").text(num02 + " KB");
          }
        }
        return true;
      });
    });
  </script>
  <title>无标题文档</title>
</head>
<body>
  <table width="500" cellspacing="0" cellpadding="0">
    <tr>
      <td width="72" id="fileType">
      </td>
      <td width="242">
        <input type="file" name="myFile" id="myFile" />
      </td>
      <td width="184" id="fileSize" class="fileSize">
      </td>
    </tr>
  </table>
</body>
</html>

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.3water.com/code/ccode_html_css_json

XML代码在线格式化美化工具:
http://tools.3water.com/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

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

Javascript 相关文章推荐
js 巧妙去除数组中的重复项
Jan 25 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
JavaScript 实现继承的几种方式
Feb 19 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
JS脚本实现动态给标签控件添加事件的方法
Jun 02 #Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 #Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 #Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 #Javascript
jquery.validate使用详解
Jun 02 #Javascript
jQuery ajax应用总结
Jun 02 #Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python调用C语言开发的共享库方法实例
2015/03/18 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
人事部经理岗位职责
2014/03/07 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
车辆转让协议书
2014/09/24 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
在校生证明
2015/06/17 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
详解MySQL的半同步
2021/04/22 MySQL