jquery实现上传文件大小类型的验证例子(推荐)


Posted in Javascript onJune 25, 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>

以上就是小编为大家带来的jquery实现上传文件大小类型的验证例子(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 #Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 #Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 #Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 #Javascript
jQuery图片渐变特效的简单实现
Jun 25 #Javascript
js删除局部变量的实现方法
Jun 25 #Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
初识ThinkPHP控制器
2016/04/07 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
jupyter notebook实现显示行号
2020/04/13 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
六一儿童节主持词
2014/03/21 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
校运会通讯稿
2015/07/18 职场文书
学校教代会开幕词
2016/03/04 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python