jquery检测上传文件大小示例

 更新时间:2020年04月26日 10:36:10   作者:DavidHHuan  
这篇文章主要介绍了jquery检测上传文件大小,结合完整示例形式分析了jquery针对上传文件大小检测与计算相关操作技巧,需要的朋友可以参考下

本文实例讲述了jquery检测上传文件大小。分享给大家供大家参考,具体如下:

google了很久,基本上都是用 activeX 来实现~至于为什么不行,这个不多说,说一下以下方法:

已经测试通过的浏览器:IE6+,firefox,chrome,其中 firefox 和 chrome 要能支持 HTML5。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=big5">
  <title>上传</title>
</head>
<body>
  <form action="XXXXXX" method="POST" name="FileForm" enctype="multipart/form-data">
  <div align="center">
    图片:
    <input type="file" name="file1" size="20" id="file1" />
    <input type="button" onclick="checkFile()" /></div>
  </form>
</body>
</html> 

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
  var fileSize = 0; //文件大小
  var SizeLimit = 1024; //上传上限,单位:byte

  function checkFile() {
    var f = document.getElementById("file1");
    //FOR IE
    if ($.browser.msie) {
      var img = new Image();
      img.onload = checkSize;
      img.src = f.value;
    }
    //FOR Firefox,Chrome
    else {
      fileSize = f.files.item(0).size;
      checkSize();
    }
  }

  //检查文件大小
  function checkSize() {
    //FOR IE FIX
    if ($.browser.msie) {
      fileSize = this.fileSize;
    }

    if (fileSize > SizeLimit) {
      alert('文件超过大小');
    } else {
      document.FileForm.submit();
    }
  }
</script>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jQuery类选择器用法实例

    jQuery类选择器用法实例

    这篇文章主要介绍了jQuery类选择器用法,以一个隐藏div元素的实例分析了jQuery类选择器的用法技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery自适应轮播图插件Swiper用法示例

    jQuery自适应轮播图插件Swiper用法示例

    这篇文章主要介绍了jQuery自适应轮播图插件Swiper用法,结合实例形式分析了jQuery轮播图插件的功能与具体使用方法,需要的朋友可以参考下
    2016-08-08
  • jquery实现最简单的滑动菜单效果代码

    jquery实现最简单的滑动菜单效果代码

    这篇文章主要介绍了jquery实现最简单的滑动菜单效果代码,涉及jQuery基于鼠标事件操作页面元素动态变换的基本技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jquery 删除节点 添加节点 找兄弟节点的简单实现

    jquery 删除节点 添加节点 找兄弟节点的简单实现

    下面小编就为大家带来一篇jquery 删除节点 添加节点 找兄弟节点的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • 详解JQuery基础动画操作

    详解JQuery基础动画操作

    这篇文章主要介绍了JQuery基础动画操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • jQuery EasyUI中对表格进行编辑的实现代码

    jQuery EasyUI中对表格进行编辑的实现代码

    对表格进行增删改后一次性保存或回滚的发生相当有用。参照官方的教程例子做了个用户管理的小例子。
    2010-06-06
  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - 标签页/选项卡(Tabs),学习jQuery EasyUI的朋友可以参考下。
    2011-10-10
  • 基于jQuery+JSON的省市二三级联动效果

    基于jQuery+JSON的省市二三级联动效果

    本文给大家分享的是利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果,十分的简单实用,效果也非常棒,有需要的小伙伴可以参考下。
    2015-06-06
  • Jquery 获取相同NAME 或者id删除行操作

    Jquery 获取相同NAME 或者id删除行操作

    这篇文章主要介绍了Jquery 获取相同NAME 或者id删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • jquery插件实现图片对比

    jquery插件实现图片对比

    这篇文章主要为大家详细介绍了jquery插件实现图片对比,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论