使用FileReader采用的默认编码

使用FileReader对象默认采用的编码方式为UTF-8编码。但是，你也可以通过指定readAsText方法的第二个参数，来指定读取文件的编码方式。下面是使用FileReader对象进行文件读取的攻略：

步骤一：创建FileReader对象

在javascript中创建FileReader对象，可以使用下面的代码：

var reader = new FileReader();

步骤二：指定文件读取完成的回调函数

在FileReader对象读取文件完成之后，会自动调用一个回调函数，你需要指定这个回调函数。你可以使用下面的代码来指定回调函数：

reader.onload = function(event) {
    // TODO: 处理文件读取成功的事件
};

步骤三：读取文件内容

使用FileReader对象的readAsText方法可以读取文件内容，这个方法接收两个参数：

• 第一个参数是要读取的文件对象
• 第二个参数是文件的编码方式，默认为UTF-8编码

读取文件的代码如下：

reader.readAsText(file, "GBK");

下面是两个使用FileReader对象读取文件内容的示例：

示例一：读取文本文件

<input type="file" onchange="readTextFile(this)">
<script type="text/javascript">
    function readTextFile(input) {
        var file = input.files[0]; // 获取文件对象
        var reader = new FileReader(); // 创建FileReader对象
        reader.onload = function(event) { // 指定读取完成的回调函数
            var contents = event.target.result;
            alert(contents);
        };
        reader.readAsText(file); // 读取文件
    }
</script>

在上面的代码中，当用户选择了一个文本文件后，会调用readTextFile函数，这个函数创建了FileReader对象，并使用readAsText方法读取文件内容。在文件读取完成之后，会弹出一个对话框显示文件内容。

示例二：读取图片文件

<input type="file" onchange="readImageFile(this)">
<script type="text/javascript">
    function readImageFile(input) {
        var file = input.files[0]; // 获取文件对象
        var reader = new FileReader(); // 创建FileReader对象
        reader.onload = function(event) { // 指定读取完成的回调函数
            var img = document.createElement("img");
            img.src = event.target.result;
            document.body.appendChild(img);
        };
        reader.readAsDataURL(file); // 读取文件
    }
</script>

在上面的代码中，当用户选择了一个图片文件后，会调用readImageFile函数，这个函数创建了FileReader对象，并使用readAsDataURL方法读取文件内容。在文件读取完成之后，会创建一个图片对象，并在页面中显示这个图片。