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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
Vue简单实现原理详解
May 07 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
JavaScript实现刮刮乐效果
Nov 01 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
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
js 闭包深入理解与实例分析
2020/03/19 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
python中list常用操作实例详解
2015/06/03 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
党员四风问题对照检查材料
2014/09/27 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
单身证明范本
2015/06/15 职场文书
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android