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 29 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
详解vue v-model
Aug 31 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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删除指定编号员工信息的方法
2015/01/14 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php递归函数怎么用才有效
2018/02/24 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
简单的python后台管理程序
2017/04/13 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python requests模块session代码实例
2020/04/14 Python
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
采购部长岗位职责
2014/06/13 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
使用Python解决图表与画布的间距问题
2022/04/11 Python