这段代码创建了一个包含文件选择器和图片预览的简单 HTML 页面,并使用 JavaScript 监听文件选择器的 onchange 事件。一旦用户选择了一个文件,JavaScript 就会使用 FileReader API 读取文件并将其转换为数据 URL。然后,JavaScript 将数据 URL 设置为图片预览的 src 属性,以显示该图片。
首先是HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传图片并显示</title>
</head>
<body>
<input type="file" id="fileInput">
<br>
<img id="imagePreview" src="#" alt="图片预览">
<script src="script.js"></script>
</body>
</html>
JavaScript 代码,我这里是在同一目录下创建了名为script.js的文件
const fileInput = document.getElementById('fileInput');
const imagePreview = document.getElementById('imagePreview');
fileInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener('load', function() {
imagePreview.setAttribute('src', this.result);
});
reader.readAsDataURL(file);
}
});