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学习笔记 delete运算符
Sep 13 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
vue实现路由切换改变title功能
May 28 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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服务端图片生成缩略图的方法详解
2013/06/20 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
js 深拷贝函数
2008/12/04 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
名片管理系统python版
2018/01/11 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python编写俄罗斯方块
2020/03/13 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
一套PHP的笔试题
2013/05/31 面试题
关于毕业的中学校园广播稿
2014/01/26 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
特种设备安全管理制度
2015/08/06 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python