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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
javascript相关事件的几个概念
May 21 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
vue 实现路由跳转时更改页面title
Nov 05 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项目的方法
2006/10/09 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript的Cookies
2008/01/16 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
vue 组件内获取actions的response方式
2019/11/08 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python对数据库操作
2016/03/28 Python
python实现验证码识别功能
2018/06/07 Python
python调用java的jar包方法
2018/12/15 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python登录系统界面实现详解
2019/06/25 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
公司员工活动策划方案
2014/08/20 职场文书
写给导师的自荐信
2015/03/06 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技