掌握HTML5轻松获取上传图片宽度，告别繁琐代码挑战！

在Web开发中，处理图片是一个常见的任务。有时候，我们需要获取上传图片的宽度来进行后续的布局或处理。HTML5提供了一种简单的方法来获取图片的宽度，无需编写繁琐的JavaScript代码。以下是详细的步骤和示例，帮助你轻松掌握这一技能。

1. 使用HTML5的`<input>`元素

首先，确保你的HTML页面使用了HTML5。你可以通过在<html>标签中添加manifest属性来声明HTML5：

<!DOCTYPE html> <html manifest="appcache.appcache"> <head> <title>获取图片宽度</title> </head> <body> <!-- 页面内容 --> </body> </html>

接下来，添加一个<input>元素，让用户可以选择图片文件：

<input type="file" id="imageInput" accept="image/*">

2. 监听文件选择事件

使用JavaScript监听input元素的change事件，当用户选择图片文件时触发：

<script> document.getElementById('imageInput').addEventListener('change', handleFileSelect, false); </script>

3. 获取图片文件

在handleFileSelect函数中，获取用户选择的图片文件：

function handleFileSelect(event) { var files = event.target.files; if (files && files[0]) { var file = files[0]; // 创建一个读取器 var reader = new FileReader(); // 读取图片文件作为DataURL reader.onload = function(e) { var img = new Image(); img.onload = function() { // 图片加载完成后，获取图片宽度 var width = img.width; console.log('图片宽度：' + width); }; // 设置图片源为读取的DataURL img.src = e.target.result; }; // 读取文件作为DataURL reader.readAsDataURL(file); } } </script>