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 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
js读取本地文件的实例
Dec 22 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
企业总经理职责
2014/02/02 职场文书
节能减耗标语
2014/06/21 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
军训后的感想
2015/08/07 职场文书
股权投资协议书
2016/03/23 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript