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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
jquery+json实现分页效果
Mar 07 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
vue-test-utils初使用详解
May 23 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
JavaScript实现图片轮播特效
2019/10/23 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
护理人员的自我评价分享
2014/03/15 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
留学经费担保书
2014/05/12 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL