怎样获取上传图片类型与大小-js教程-PHP中文网

首页

web前端

js教程

怎样获取上传图片类型与大小

php中世界最好的语言

Jun 08, 2018 pm 02:28 PM

jquery 上传图片判断大小类型

这次给大家带来怎样获取上传图片类型与大小，获取上传图片类型与大小的注意事项有哪些，下面就是实战案例，一起来看一下。

这里使用jQuery判断上传图片的类型和大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="" method="">
  <input type="file" id="file" />
</form>
<p id="p_1">图片格式为：</p>
<p id="p_2">图片大小为：</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  var p_1 = $(&#39;#p_1&#39;),
    p_2 = $(&#39;#p_2&#39;);
  $(&#39;body&#39;).on(&#39;change&#39;,&#39;#file&#39;,function(){
    var path = $(this).val(),
    extStart = path.lastIndexOf(&#39;.&#39;),
    ext = path.substring(extStart,path.length).toUpperCase();
    //判断图片格式
    if(ext !== &#39;.PNG&#39; && ext !== &#39;.JPG&#39; && ext !== &#39;.JPEG&#39; && ext !== &#39;.GIF&#39;){
      alert(&#39;请上传正确格式的图片&#39;);
      resetFile();
      return false;
    }else{
      p_1.html(&#39;图片格式为：&#39; + ext);
    }
    //获取图片大小，注意使用this，而不是$(this)
    var size = this.files[0].size / 1024;
    if(size > 10240){
      alert(&#39;图片大小不能超过10M&#39;);
      resetFile();
      return false;
    }else{
      p_2.html(&#39;图片大小为：&#39; + size.toFixed(2) + &#39;KB&#39;);
    }
  })
  //还原
  function resetFile(){
    //清空file表单的值，不能直接使用$(&#39;#file&#39;).val(&#39;&#39;)这种写法
    $(&#39;form&#39;).html(&#39;<input type="file" id="file" />&#39;);
    p_1.html(&#39;图片格式为：&#39;);
    p_2.html(&#39;图片大小为：&#39;);
  }
})
</script>
</body>
</html>

登录后复制

lastIndexOf()方法从后向前检索指定字符串，如果出现了指定的字符，则返回该字符所在的位置，如果没有，返回-1，位置从0开始计数

toUpperCase()方法转换成大写字母

substring()方法截取字符串，第一个参数为开始的位置，第二个参数为结束的位置（如果省略，则默认会截取到字符串的结尾），与slice()和substr()方法不同的是，substring()不接受负的参数

slice()方法同substring()方法，区别是接受负的参数（若参数为负数，则从字符串尾部开始计算位置）

substr()方法截取字符串，第一个参数是开始的位置，第二个参数是截取的长度（不同于slice和substring），现已不建议使用

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7486

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

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

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

视频矩阵账号怎么做？它的矩阵账号都有哪些类型呢？ Mar 21, 2024 pm 04:57 PM

随着短视频平台的盛行，视频矩阵账号营销已成为一种新兴营销方式。通过在不同平台上创建和管理多个账号，企业和个人能够实现品牌推广、粉丝增长和产品销售等目标。本文将为您探讨如何有效运用视频矩阵账号，并介绍不同类型的视频矩阵账号。一、视频矩阵账号怎么做？要想做好视频矩阵账号，需要遵循以下几个步骤：首先要明确你的视频矩阵账号的目标是什么，是为了品牌传播、粉丝增长还是产品销售。明确目标有助于制定相应的策略。2.选择平台：根据你的目标受众，选择合适的短视频平台。目前主流的短视频平台有抖音、快手、火山小视频等。

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

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

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

Go语言中如何判断日期是否为前一天？ Mar 24, 2024 am 10:09 AM

题目：Go语言中如何判断日期是否为前一天？在日常开发中，经常会遇到需要判断日期是否为前一天的情况。在Go语言中，我们可以通过时间计算来实现这个功能。下面将结合具体的代码示例来演示如何在Go语言中判断日期是否为前一天。首先，我们需要导入Go语言中的时间包，代码如下：import("time")接着，我们定义一个函数IsYest

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

Golang 函数返回值的类型是什么？ Apr 13, 2024 pm 05:42 PM

Go函数可以返回多个不同类型的值，返回值类型在函数签名中指定，并通过return语句返回。例如，函数可以返回一个整数和一个字符串：funcgetDetails()(int,string)。实战中，一个计算圆面积的函数可以返回面积和一个可选错误：funccircleArea(radiusfloat64)(float64,error)。注意事项：如果函数签名未指定类型，则返回空值；建议使用显式类型声明的return语句以提高可读性。

如何判断jQuery元素是否具有特定属性？ Feb 29, 2024 am 09:03 AM

如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属

See all articles

怎样获取上传图片类型与大小

热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版

热门话题