js 引入 FileReader
时间: 2024-06-18 20:01:52 浏览: 9
在JavaScript中,`FileReader`是一个内置对象,用于读取用户选择的文件,比如从浏览器文件系统中加载文件内容或从拖放事件中读取文件。`FileReader`提供了一种异步的方式来处理文件,这样不会阻塞JavaScript的执行线程。
引入`FileReader`的步骤如下:
1. 创建FileReader实例:
```javascript
var reader = new FileReader();
```
2. 指定要执行的操作:
- `readAsText()`:用于读取文本文件的内容。
- `readAsDataURL()`:用于读取文件作为DataURL(一种包含图像数据的字符串)。
- `readAsArrayBuffer()`:用于读取二进制数据(如图片、音频等)。
3. 设置读取完成后的回调函数:
```javascript
reader.onload = function (event) {
// 文件读取成功,event.target.result 将包含读取的内容
console.log('文件内容:', event.target.result);
};
// 设置错误处理函数,如果读取过程中发生错误,将触发此函数
reader.onerror = function (error) {
console.error('读取文件出错:', error);
};
```
4. 触发读取操作:
- 对于文本文件:
```javascript
reader.readAsText(file, 'UTF-8'); // file 是用户选择的File对象
```
- 对于二进制数据或其他类型:
```javascript
reader.readAsArrayBuffer(file); // 或者使用对应的 readAsDataURL() / readAsDataURL()
```
5. 可选:暂停和继续读取操作,或者取消读取(`reader.abort()`)。