jquery实现上传文件大小类型的验证例子-html教程-PHP中文网

首页

web前端

html教程

jquery实现上传文件大小类型的验证例子

韦小宝

Nov 29, 2017 am 09:54 AM

jquery 大小文件

文件上传在网站中很长被用到而用jQuery来做上传给用户的体验又更好点，这章就来讲讲jQuery实现上传，并且验证文件大小的例子，想学习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=&#39;myFile&#39;]").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>

登录后复制

以上就是jquery实现上传文件大小类型的验证例子，还在学习jQuery的同学可以研究研究。

相关推荐：

jQuery文件上传插件Uploadify使用指南_jquery

JQuery上传插件Uploadify使用详解

php简单实现批量上传图片的方法 android 批量上传图片 jquery上传图片插件上传图片

以上是jquery实现上传文件大小类型的验证例子的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7464

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

出现0x80004005错误代码怎么办小编教你0x80004005错误代码解决方法 Mar 21, 2024 pm 09:17 PM

在电脑中删除或解压缩文件夹，时有时候会弹出提示对话框“错误0x80004005：未指定错误”，如果遇到这中情况应该怎么解决呢？提示错误代码0x80004005的原因其实有很多，但大部分因为病毒导致，我们可以重新注册dll来解决问题，下面，小编给大伙讲解0x80004005错误代码处理经验。有用户在使用电脑时出现错误代码0X80004005的提示，0x80004005错误主要是由于计算机没有正确注册某些动态链接库文件，或者计算机与Internet之间存在不允许的HTTPS连接防火墙所引起。那么如何

夸克网盘的文件怎么转移到百度网盘？ Mar 14, 2024 pm 02:07 PM

　　夸克网盘和百度网盘都是现在最常用的储存文件的网盘软件，如果想要将夸克网盘内的文件保存到百度网盘，要怎么操作呢？本期小编整理了夸克网盘电脑端的文件转移到百度网盘的教程步骤，一起来看看是怎么操作吧。　　夸克网盘的文件怎么保存到百度网盘？要将夸克网盘的文件转移到百度网盘，首先需在夸克网盘下载所需文件，然后在百度网盘客户端中选择目标文件夹并打开。接着，将夸克网盘中下载的文件拖放到百度网盘客户端打开的文件夹中，或者使用上传功能将文件添加至百度网盘。确保上传完成后在百度网盘中查看文件是否成功转移。这样就

hiberfil.sys是什么文件？hiberfil.sys可以删除吗？ Mar 15, 2024 am 09:49 AM

　　最近有很多网友问小编，hiberfil.sys是什么文件？hiberfil.sys占用了大量的C盘空间可以删除吗？小编可以告诉大家hiberfil.sys文件是可以删除的。下面就来看看详细的内容。hiberfil.sys是Windows系统中的一个隐藏文件，也是系统休眠文件。通常存储在C盘根目录下，其大小与系统安装内存大小相当。这个文件在计算机休眠时被使用，其中包含了当前系统的内存数据，以便在恢复时快速恢复到之前的状态。由于其大小与内存容量相等，因此它可能会占用较大的硬盘空间。　　hiber

如何在VirtualBox中增加磁盘大小[指南] Mar 17, 2024 am 10:10 AM

我们经常遇到预定义磁盘大小没有空间容纳更多数据的情况？如果您在稍后阶段需要更多的虚拟机硬盘空间，则必须扩展虚拟硬盘和分区。在这篇文章中，我们将看到如何在VirtualBox中增加磁盘大小。增加VirtualBox中的磁盘大小重要的是要注意，您可能希望在执行这些操作之前备份您的虚拟硬盘文件，因为总是有可能出错。有备份总是一个好的做法。然而，该过程通常运行良好，请确保在继续之前关闭您的机器。有两种方法可以增加VirtualBox中的磁盘大小。使用图形用户界面扩展VirtualBox的磁盘大小使用CL

MySQL中.ibd文件的作用详解及相关注意事项 Mar 15, 2024 am 08:00 AM

MySQL中.ibd文件的作用详解及相关注意事项MySQL是一种流行的关系型数据库管理系统，数据库中的数据存储在不同的文件中。其中，.ibd文件是InnoDB存储引擎中的数据文件，用于存储表中的数据和索引。本文将对MySQL中.ibd文件的作用进行详细解析，并提供相关代码示例以帮助读者更好地理解。一、.ibd文件的作用：存储数据：.ibd文件是InnoDB存

Linux系统查看log日志命令详解！ Mar 06, 2024 pm 03:55 PM

在Linux系统中，可以使用以下命令来查看日志文件的内容：tail命令：tail命令用于显示日志文件的末尾内容。它是查看最新日志信息的常用命令。tail[选项][文件名]常用的选项包括：-n：指定要显示的行数，默认为10行。-f：实时监视文件内容，并在文件更新时自动显示新的内容。示例：tail-n20logfile.txt#显示logfile.txt文件的最后20行内容tail-flogfile.txt#实时监视logfile.txt文件的更新内容head命令：head命令用于显示日志文件的开头

创建和运行Linux'.a”文件 Mar 20, 2024 pm 04:46 PM

在Linux操作系统中处理文件需要使用各种命令和技术，使开发人员能够高效地创建和执行文件、代码、程序、脚本和其他东西。在Linux环境中，扩展名为”.a”的文件作为静态库具有重要的重要性。这些库在软件开发中发挥着重要作用，允许开发人员有效地管理和共享多个程序的公共功能。对于Linux环境中的有效软件开发，了解如何创建和运行“.a”文件至关重要。本文将介绍如何全面安装和配置Linux“.a”文件，让我们一起探索Linux“.a”文件的定义、用途、结构，以及创建和执行它的方法。什么是L

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

See all articles

jquery实现上传文件大小类型的验证例子

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题