javascript:检测图片的宽高
1 方案描述
JavaScript提供了非常方便的FileReader和Image对象,可以帮助我们轻松实现这个功能。具体步骤如下:
- 获取文件输入框:首先,我们需要获取到用户选择的文件。
- 读取文件内容:然后,通过FileReader对象读取文件内容。
- 创建图片对象:接下来,用Image对象加载读取到的文件。
- 检测图片尺寸:最后,通过Image对象获取图片的宽度和高度,并进行判断。
2 代码示例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>window.onload = function() {const fileUpload = document.querySelector('input[type="file"]');const reader = new FileReader();fileUpload.addEventListener('change', () => {reader.readAsDataURL(fileUpload.files[0]);reader.onload = (e) => {const image = new Image();image.src = e.target.result;image.onload = () => {const { height, width } = image;if (height > 100 || width > 100) {alert("上传的图片尺寸为宽:"+width+",高:"+height+",过大,请选择100x100像素以内的图片。");} else {alert("图片上传成功!");}};};});}</script></head><body><input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*"></body>
</html>
(1)首先获取文件输入框:
document.querySelector('input[type="file"]')
选择了页面上的文件输入框。
(2)创建FileReader实例:
const reader = new FileReader();
通过new FileReader()创建了一个FileReader对象。
(3)添加事件监听器:
fileUpload.addEventListener('change', () => { ... })
监听文件输入框的变化事件,当用户选择文件时触发。
(4)读取文件内容:
reader.readAsDataURL(fileUpload.files[0])
读取用户选择的文件,并转换为Data URL格式。
(5)创建Image对象:
const image = new Image();image.src = e.target.result;
在FileReader读取完成后,通过new Image()创建一个图片对象,并将其src属性设置为读取到的文件内容。
(6)检测图片尺寸:
image.onload = () => {const { height, width } = image;if (height > 100 || width > 100) {alert("上传的图片尺寸为宽:"+width+",高:"+height+",过大,请选择100x100像素以内的图片。");} else {alert("图片上传成功!");}};
当图片加载完成后,通过image.onload事件获取图片的宽度和高度,并进行尺寸判断。
结果如下:

相关文章:
javascript:检测图片的宽高
1 方案描述 JavaScript提供了非常方便的FileReader和Image对象,可以帮助我们轻松实现这个功能。具体步骤如下: 获取文件输入框:首先,我们需要获取到用户选择的文件。读取文件内容:然后,通过FileReader对象…...
机械学习—零基础学习日志(高数23——无穷小运算)
零基础为了学人工智能,真的开始复习高数 这段时间,把张宇老师讲解考研的第一部分基本全部学习完毕了。 这里把第一部分的内容最后汇总一下。 无穷小运算——吸收律 这里展示一些无穷小的具体计算思路 无穷小运算——计算方法 泰勒展开的原则 夹逼准则…...
一个网络上计算机的通信
一台计算机上多个进程间的通信方式有:管道、共享内存、信号量、消息队列。如果不同的计算机上多个进程间通信,即通信的进程在不同的计算机上,需要用到网络相关的知识。 那么两台计算机通信需要解决哪些问题? 我们来回顾一下计算机…...
C语言基础题:吃冰棍(C语言版)
1.题目描述 机器猫喜欢吃冰棍。 买一根冰棍,吃完了会剩一个木棒;每三个木棒可以兑换一个冰棍。兑换出来的冰棍,吃完之后也能剩下一个木棒。 所以,如果机器猫买了5根冰棍,他可以吃完之后得到5个木棒;拿3个木棒兑换1根冰棍ÿ…...
C++中,vector、deque、list、set、multiset、unordered_set和unordered_multiset容器类的总结
最近用set比较多,复习一下基础。 在C中,vector、deque、list、set、multiset、unordered_set和unordered_multiset都是容器类,但它们有不同的特点和用途。下面是对它们的区别和示例说明: 1. vector 特点: 动态数组,…...
Python处理Redis
操作Redis redis也是基于tcp通信的,所以我们可以直接通过socket来做 Redis通信过程 简单使用 redis-cli.exe -h192.168.56.188 auth 123456 set name myredis get name lindex students 0 # 查看students列的第一条数据核心协议体 *2 # 表示下述的指令由2个字符…...
nodejs多版本随心切换-windows
nodejs多版本控制 1. 安装 nvm github下载地址 不需要卸载已安装的nodejs,安装时会让你选择nodejs的位置,可修改为你已经安装的路径,会自动搜索已安装版本,并进行弹窗询问,选择托管即可 2. 修改配置文件 在 nvm 安装…...
json文件格式
json文件格式 格式介绍1格式介绍2格式3 格式介绍1 格式介绍2 格式3 参考地址...
日撸Java三百行(day15:栈的应用之括号匹配)
目录 一、栈的括号匹配 二、代码实现 1.方法创建 2.数据测试 3.完整的程序代码 总结 一、栈的括号匹配 要完成今天的任务,需要先来了解一下什么是栈的括号匹配。首先,顾名思义,括号匹配就是指将一对括号匹配起来,我们给定一…...
Oracle-OracleConnector
提示:OracleConnector 类是 Debezium 中用于与 Oracle 数据库交互的一个连接器组件 文章目录 前言一、核心功能二、代码分析总结 前言 提示:OracleConnector 类负责配置、启动、管理和验证与 Oracle 数据库的连接,并为后续的数据捕获任务准备…...
『 Linux 』线程池与 POSIX 线程的封装编码实现
文章目录 线程池概念线程池的编码实现线程池的测试参考代码 线程的封装使用测试封装后的线程参考代码 线程池概念 池化技术是一种资源管理方法,通过预先创建和管理一组资源以便在需要使用时快速分配这些资源; 线程池是池化技术的一种典型应用; 资源分配 在线程池中预先创建一定…...
【C++】————哈希表
作者主页: 作者主页 本篇博客专栏:C 创作时间 :2024年8月6日 前言: 在计算机科学的广袤世界中,数据结构犹如基石,支撑着各种高效算法的构建与运行。而哈希表(Hash Table)&#…...
前端学习AI历程
AI基本概念tensorflow入门conda搭建环境,pycham使用训练自己的第一个模型AI目前前端方便入手的几个方向 素材图片库图像识别,在线学习低代码应用智能客服 获取数据集 roboflowkagglecocomakesense(用于打标) 认识yolo两个简单小应…...
常见中间件漏洞复现之【Tomcat】!
Tomcat介绍 tomcat是⼀个开源⽽且免费的jsp服务器,默认端⼝ : 8080,属于轻量级应⽤服务器。它可以实现 JavaWeb程序的装载,是配置JSP(Java Server Page)和JAVA系统必备的⼀款环境。 在历史上也披露出来了很多的漏洞 …...
C++并发编程(一):线程基础
简介 本文学习的是 b 站 up 恋恋风辰的并发编程教学视频做的一些笔记补充。 教程视频链接如下:线程基础:视频教程 文档链接如下:线程基础:笔记文档 理论上直接看 up 提供的笔记文档即可,我这里主要是记录一些我自己…...
enq: HW - contention事件来啦
业务系统反应数据库慢,根据时间查看awr报告。 先看一眼事件名称 HW enqueue 用于序列化超出段高水位线的空间分配。如果同时向对象添加大量数据,则多个进程可能同时尝试在高水位线上方分配空间,从而导致争用。 既然是控制资源并发的enq&…...
MyBatis补充
控制类和dao层接口以及mapper中的xml是怎样的关联的? 在Mybatis中,控制类和dao层接口是通过mapper的xml文件进行连接的。 控制类调用dao层接口中的方法,通过接口实现进行访问数据库操作。dao层接口定义数据库操作的方法,提供给控制…...
系统架构师(每日一练16)
每日一练 答案与解析 1.软件测试一般分为两个大类:动态测试和静态测试。前者通过运行程序发现错误,包括()等方法;后者采用人工和计算机辅助静态分析的手段对程序进行检测,包括()等方法。答案与解析 问题1 A.边界值分析、逻辑覆盖、基本路径 B.桌面检查、…...
实践致知第17享:电脑忽然黑屏的常见原因及处理方法
一、背景需求 小姑电话说:最近,电脑忽然就黑屏了(如下图所示),但是等待几十秒甚至一分钟,电脑就能自然恢复了,这种状况一天能出现三四次,怎么办? 二、分析诊断 电脑黑屏…...
微信小程序--实现地图定位---获取经纬度
(1) (2) (3) html: <view class"titleTwo" style"border: none;"><view class"fontSize30 invoiceTile">企业地址</view><view class"invoiceRight" bind:tap"tapChooseAddress" data-maptype"…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
如何更改默认 Crontab 编辑器 ?
在 Linux 领域中,crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用,用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益,允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
