JavaScript通过filereader接口读取文件

下面详细讲解JavaScript通过filereader接口读取文件的完整攻略：

1. Filereader介绍

FileReader是H5新增的文件读取对象，通过FileReader对象，web应用程序可以异步读取存储在用户计算机上的文件内容，使用FileReader可以读取文本、图片（base64字符串）、音频和视频等格式的文件。下面我们将介绍如何利用FileReader来进行文件读取的操作。

2. 文件读取的流程

文件读取的具体流程如下：

1. 通过\<input type="file">标签选择文件；
2. 利用FileReader对象读取文件内容，将文件内容转为base64编码字符串；
3. 通过Ajax异步传输base64编码字符串至服务器端；
4. 服务器端进行base64解码，对文件内容进行操作。

3. 读取文本文件

读取文本文件的代码如下：

<input type="file" onchange="readFile(this)">

<script>
function readFile(obj) {
    var file = obj.files[0];
    var reader = new FileReader();
    reader.onload = function() {
        console.log(this.result);
    }
    reader.readAsText(file);
}
</script>

在这个示例中，我们通过input标签的onchange事件触发文件的读取，并将读取到的文件通过console.log()输出。通过readAsText方法读取到的文件是以字符串的形式进行输出的。

4. 读取图片文件

读取图片文件的代码如下：

<input type="file" onchange="readFile(this)">

<script>
function readFile(obj) {
    var file = obj.files[0];
    var reader = new FileReader();
    reader.onload = function() {
        var img = new Image();
        img.src = this.result;
        document.body.appendChild(img);
    }
    reader.readAsDataURL(file);
}
</script>

在这个示例中，我们同样通过input标签的onchange事件触发文件的读取，并将读取到的图片以url形式展示在网页中。通过readAsDataURL方法读取到的文件是以base64编码字符串的形式进行输出的。

以上就是通过FileReader接口读取文件的完整攻略，希望对你有所帮助。