jQuery简单验证上传文件大小及类型的方法


Posted in Javascript onJune 02, 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>

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.3water.com/code/ccode_html_css_json

XML代码在线格式化美化工具:
http://tools.3water.com/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

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

Javascript 相关文章推荐
JavaScript 大数据相加的问题
Aug 03 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 #Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 #Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 #Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 #Javascript
jquery.validate使用详解
Jun 02 #Javascript
jQuery ajax应用总结
Jun 02 #Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 #Javascript
You might like
重置版战役片段
2020/04/09 魔兽争霸
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
vue小白入门教程
2018/04/02 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
vue实现倒计时功能
2021/03/24 Vue.js
青年教师典范事迹材料
2014/01/31 职场文书
梅花魂教学反思
2014/04/25 职场文书
环保口号大全
2014/06/12 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
如何在python中实现ECDSA你知道吗
2021/11/23 Python