FileReader怎么用
时间: 2023-08-23 07:07:26 浏览: 52
回答: FileReader是一个构造函数,用于读取Blob对象中的内容。使用时,首先通过构造函数初始化一个FileReader对象,然后调用其方法来读取指定的Blob对象。例如,可以使用readAsDataURL方法来读取文件并将其转换为base64编码的字符串表示。[2]读取完成后,可以通过监听onload事件来获取读取文件的地址,然后将其赋值给img标签的src属性,以实现对图片的预览。[2][3]以下是一个使用FileReader的示例代码:
```javascript
const reader = new FileReader(); // 初始化一个FileReader对象
reader.readAsDataURL(file); // 开始读取指定的Blob中的内容
reader.onload = (e) => { // 在读取后触发的事件,并获取读取文件的地址
let base64Str = reader.result.split(',')[1];
img.src = e.target.result;
};
```
另外,如果想要实现文件选择后自动触发读取并预览图片的功能,可以监听input[type="file"]的change事件,然后在事件处理函数中使用FileReader来读取文件并将其赋值给img标签的src属性。[3]以下是一个示例代码:
```javascript
document.querySelector('#file').addEventListener('change', (fileChoosed) => {
const reader = new FileReader();
reader.readAsDataURL(fileChoosed.target.files[0]); // 发起异步请求
reader.onload = function(readRes) {
document.querySelector('#imgPreview').src = readRes.target.result;
};
});
```
希望以上内容对您有所帮助![1][2][3]
相关推荐
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)