js读取本地文件夹中的图片并显示在HTML页面中
时间: 2023-05-19 16:04:00 浏览: 75
可以使用HTML5的File API来读取本地文件夹中的图片,然后使用JavaScript将其显示在HTML页面中。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Display Local Images</title>
</head>
<body>
<input type="file" id="fileInput">
<div id="imageContainer"></div>
<script>
var fileInput = document.getElementById('fileInput');
var imageContainer = document.getElementById('imageContainer');
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
var reader = new FileReader();
reader.addEventListener('load', function() {
var image = new Image();
image.src = reader.result;
imageContainer.appendChild(image);
});
reader.readAsDataURL(file);
});
</script>
</body>
</html>
```
这段代码创建了一个文件选择框和一个图片容器。当用户选择一个图片文件后,JavaScript会使用FileReader读取该文件,并将其转换为DataURL格式。然后创建一个新的Image对象,将DataURL赋值给其src属性,最后将该图片添加到图片容器中。