实现在网页中点击选择文件按钮再点击获取图片按钮可以出现相应文件中的多张照片
时间: 2023-05-31 10:02:27 浏览: 134
要实现这个功能,你需要使用HTML的文件输入类型来允许用户选择文件,然后使用JavaScript来读取选择的文件并显示其中的图像。
HTML代码:
```html
<input type="file" id="file-input" multiple>
<button id="get-images-btn">获取图片</button>
<div id="image-container"></div>
```
在这里,我们使用了一个文件输入类型的input元素,并添加了一个id属性为“file-input”,以及一个获取图片的按钮和一个图像容器div元素。
JavaScript代码:
```javascript
var fileInput = document.getElementById('file-input');
var getImagesBtn = document.getElementById('get-images-btn');
var imageContainer = document.getElementById('image-container');
getImagesBtn.addEventListener('click', function() {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.match('image.*')) {
var reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement('img');
img.src = event.target.result;
imageContainer.appendChild(img);
}
reader.readAsDataURL(file);
}
}
});
```
在这里,我们首先获取了文件输入和按钮元素,并添加了一个点击事件监听器来读取选择的文件。然后,我们遍历文件数组,并检查每个文件是否为图像类型。如果是,我们使用FileReader对象读取文件内容,并将其转换为DataURL,然后创建一个图像元素,并将其添加到图像容器中。
最后,当用户点击获取图片按钮时,我们会显示选择的图像。
阅读全文