点击按钮实现图片预览功能
时间: 2024-03-24 09:15:41 浏览: 12
你可以使用HTML的`<img>`标签来显示图片,并使用JavaScript实现图片预览功能。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片预览</title>
</head>
<body>
<input type="file" onchange="previewImage(event)">
<br>
<img id="preview" src="#" alt="预览图" style="display:none; max-width: 500px;">
<script>
function previewImage(event) {
var reader = new FileReader();
reader.onload = function() {
var preview = document.getElementById('preview');
preview.src = reader.result;
preview.style.display = 'block';
}
reader.readAsDataURL(event.target.files[0]);
}
</script>
</body>
</html>
```
这段代码创建了一个文件选择框和一个隐藏的`<img>`标签,当用户选择图片后,JavaScript会将其内容读取为数据URL,并将其设置为预览图的`src`属性。最后将预览图的`display`属性设置为`block`即可显示出来。