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 类
Nov 07 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
javascript add event remove event
Apr 07 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
vue实现分页加载效果
Dec 24 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
利用javaScript处理常用事件详解
Apr 14 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开发环境
2015/07/28 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
jquery操作select大全
2014/04/25 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
angular.bind使用心得
2015/10/26 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JavaScript中undefined和null的区别
2017/05/03 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
python梯度下降法的简单示例
2018/08/31 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
Python安装selenium包详细过程
2019/07/23 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
大学生物业管理求职信
2013/10/24 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
2014年司法局工作总结
2014/12/11 职场文书
上下班时间调整通知
2015/04/23 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
Windows server 2012搭建FTP服务器
2022/04/29 Servers