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读取xml实现javascript分页
Dec 13 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
详解JS数组方法
Nov 20 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/03/04 星际争霸
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JS 控制非法字符的输入代码
2009/12/04 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python os.path模块常用方法实例详解
2018/09/16 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python开头的coding设置方法
2019/08/08 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
党员干部公开承诺书
2014/03/26 职场文书
小学生操行评语
2014/04/22 职场文书
环保倡议书格式范文
2014/05/14 职场文书
企业委托书范本
2014/09/13 职场文书
优秀大学生申请书
2019/06/24 职场文书