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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
微信小程序实现日历效果
Dec 28 Javascript
微信小程序实现购物车功能
Nov 18 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生成静态HTML速度快类库
2007/03/18 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
javascript 自定义事件初探
2009/08/21 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Python学习笔记之常用函数及说明
2014/05/23 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
django如何连接已存在数据的数据库
2018/08/14 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
骨干教师培训制度
2014/01/13 职场文书
党支部承诺书范文
2014/03/28 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
大国崛起英国观后感
2015/06/02 职场文书