实现图片上传实时显示功能
时间: 2023-08-10 14:07:18 浏览: 68
实现图片上传实时显示功能的基本思路是使用JavaScript和HTML5的File API读取文件并在页面上实时显示。具体实现步骤如下:
1. 在HTML中添加一个文件选择器(input[type=file])和一个用于显示图片的元素(img)。
```html
<input type="file" id="fileInput">
<img id="previewImg" src="#" alt="预览图片">
```
2. 使用JavaScript获取文件选择器和预览图片的元素,并为文件选择器添加change事件监听器。
```javascript
const fileInput = document.getElementById('fileInput');
const previewImg = document.getElementById('previewImg');
fileInput.addEventListener('change', function() {
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
previewImg.src = event.target.result;
};
reader.readAsDataURL(file);
} else {
previewImg.src = '#';
}
});
```
3. 在change事件监听器中,使用FileReader读取文件并将其转换为Data URL,然后将Data URL赋值给预览图片的src属性。
4. 当用户选择文件时,change事件将被触发,从而将文件读取并在页面上实时显示。
需要注意的是,这种实时显示图片的方法只适用于较小的图片,对于大型图片可能会导致性能问题。