编程 Javascript

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程序设计有所帮助。

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

- Author -

aparche

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

发布一个基于javascript的动画类 Fx.js

Nov 05 Javascript

jquery实现带二级菜单的导航示例

Apr 28 Javascript

jquery获取点击控件的绝对位置简单实例

Oct 13 Javascript

Html中 IFrame的用法及注意点

Dec 22 Javascript

Vue 2.0+Vue-router构建一个简单的单页应用（附源码）

Mar 14 Javascript

详解Vue学习笔记入门篇之组件的内容分发(slot)

Jul 17 Javascript

QRCode.js二维码生成并能长按识别

Oct 16 Javascript

js如何实现元素曝光上报

Aug 07 Javascript

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

Apr 11 Javascript

Vue发布订阅模式实现过程图解

Apr 30 Javascript

javascript实现移动端红包雨页面

Jun 23 Javascript

基于JavaScript实现轮播图效果

Jan 02 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