做美容网站公司一站式媒体发稿平台
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事件获取图片的宽度和高度，并进行尺寸判断。
结果如下：
