js怎么实现根据用户点击单选按钮选择本地文件夹中不同的图片进行显示
时间: 2023-05-21 13:00:35 浏览: 68
可以使用HTML5的File API来实现。首先,需要在HTML中添加一个input元素,type属性设置为file,然后添加一个change事件监听器,当用户选择文件时触发该事件。在事件处理程序中,可以使用FileReader对象来读取文件内容,并将其显示在页面上。以下是示例代码:
HTML代码:
```
<input type="file" id="fileInput">
<div id="imageContainer"></div>
```
JavaScript代码:
```
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 = document.createElement('img');
image.src = reader.result;
imageContainer.appendChild(image);
});
reader.readAsDataURL(file);
});
```
这段代码会在用户选择文件后,将文件内容读取为DataURL,并将其显示在页面上。