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性能陷阱小结(附实例说明)
Dec 28 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
js实现表格字段排序
Feb 19 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
AngularJS执行流程详解
Feb 17 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
详解Vue demo实现商品列表的展示
May 07 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连接MySQL数据库三种实现方法
2020/12/10 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
基于JavaScript实现验证码功能
2017/04/01 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
简单谈谈python基本数据类型
2018/09/26 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python中Unittest框架的具体使用
2019/08/27 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
python复合条件下的字典排序
2020/12/18 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
私营公司诉讼代理委托书范本
2014/09/13 职场文书