<div class="shangchuang-main">图片导入<input type="file" name="" id="" value=""/></div>js怎么写
时间: 2023-11-06 12:08:52 浏览: 58
你可以使用JavaScript中的FileReader对象来读取用户上传的文件并将其显示在页面上。以下是一个示例代码:
HTML代码:
```html
<div class="shangchuang-main">
<input type="file" id="fileInput" />
<img id="previewImg" src="#" alt="预览图片" />
</div>
```
JavaScript代码:
```javascript
const fileInput = document.getElementById('fileInput');
const previewImg = document.getElementById('previewImg');
fileInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener('load', function() {
previewImg.setAttribute('src', this.result);
});
reader.readAsDataURL(file);
}
});
```
这段代码会监听文件选择框的change事件,当用户选择一个文件后,会使用FileReader对象读取该文件,并将读取到的数据转换成一个base64编码的字符串,然后将该字符串设置为图片元素的src属性,从而实现了在页面上预览用户上传的图片。
阅读全文