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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
js运动应用实例解析
Dec 28 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
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
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python缩进和冒号详解
2016/06/01 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
浅析matlab中imadjust函数
2020/02/27 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python3获取cookie常用三种方案
2020/10/05 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
个人自我鉴定写法
2013/11/30 职场文书
大学生学期个人总结
2015/02/12 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
nginx共享内存的机制详解
2022/03/21 Servers