new FileReader() 所有用法及参数说明

> `FileReader` 是 HTML5 中的一个内置对象，可以用于读取文件内容。以下是 FileReader 的所有用法及参数说明：

####1.  创建 `FileReader` 对象
使用 new FileReader() 创建一个 FileReader 对象。

```js
var reader = new FileReader();
```
#### 2.读取文件内容
使用 `readAsText()`、`readAsDataURL()`、`readAsArrayBuffer()` 和` readAsBinaryString()` 方法读取文件内容，例如：

- readAsText(file[, encoding]): 将文件内容读取为文本字符串，可以指定编码方式。参数 file 为要读取的文件，参数 encoding 为文件的编码方式，默认为 UTF-8。例如：

```js
reader.readAsText(file, "utf-8");
```

- readAsDataURL(file): 将文件内容读取为 base64 编码的数据 URL。参数 file 为要读取的文件。例如：

```js
reader.readAsDataURL(file);
```

- readAsArrayBuffer(file): 将文件内容读取为 ArrayBuffer 对象，用于处理二进制数据。参数 file 为要读取的文件。例如：

```js
reader.readAsArrayBuffer(file);
```

- readAsBinaryString(file): 将文件内容读取为二进制字符串，已被废弃，不建议使用。参数 file 为要读取的文件。

#### 3. 监听事件
使用 `onload`、`onabort`、`onerror` 和 `onprogress` 等事件监听 `FileReader` 对象的状态和进度，例如：

- onload: 当文件读取完成时触发。事件对象 `event.target.result`包含读取的文件内容。例如：

```js
reader.onload = function(event) {
    var content = event.target.result;
    // 处理文件内容
};
```

- onabort: 当文件读取被中断时触发。例如：

```js
reader.onabort = function(event) {
    // 处理中断事件
};
```

- onerror: 当文件读取出错时触发。例如：

```js
reader.onerror = function(event) {
    // 处理错误事件
};
```

- onprogress: 当文件读取进度发生变化时触发。事件对象 event.loaded 包含已经加载的字节数，event.total 包含文件的总字节数。例如：

```js
reader.onprogress = function(event) {
    if (event.lengthComputable) {
        var percent = (event.loaded / event.total) * 100;
        // 显示读取进度
    }
};
```
> 需要注意的是，在使用 FileReader 读取文件内容时，需要手动监听读取完成、读取中断、读取错误和读取进度等事件，并及时处理相应事件。同时，需要手动调用 readAsXXX() 方法来读取文件内容，具体使用方法可以参考相关文档和示例代码。

相关推荐

近期文章