图片上传时获取图片的宽和高
时间: 2023-12-31 18:04:43 浏览: 34
在前端上传图片时,可以使用HTML5的File API获取图片的宽和高。以下是获取图片宽高的示例代码:
```javascript
// 选择文件
const fileInput = document.querySelector('input[type="file"]');
// 监听文件选择事件
fileInput.addEventListener('change', function() {
// 读取文件
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
// 监听文件读取完成事件
reader.addEventListener('load', function() {
// 创建一个图片元素
const img = new Image();
img.src = reader.result;
// 监听图片加载完成事件
img.addEventListener('load', function() {
// 获取图片的宽和高
const width = img.width;
const height = img.height;
console.log(`图片宽度:${width}px,图片高度:${height}px`);
});
});
});
```
在上面的代码中,首先监听了文件选择事件,然后使用FileReader读取文件内容。接着,创建一个图片元素,并设置其src属性为读取到的文件内容。最后,监听图片加载完成事件,获取图片的宽和高,并输出到控制台中。