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 相关文章推荐
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
采用call方式实现js继承
May 20 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
location.href用法总结(最主要的)
2013/12/27 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python 变量的创建过程详解
2019/09/02 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
一个SQL面试题
2014/08/21 面试题
见习期自我鉴定范文
2014/03/19 职场文书
基层党员对照检查材料
2014/08/25 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
告知书格式
2015/07/01 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
java实现面板之间切换功能
2022/06/10 Java/Android