使用reader.onload读取文件内容的方法

一、选取文件

使用reader.onload读取文件内容时，首先需要选取文件。在HTML中可以使用来实现。需要注意的是，为了防止部分浏览器的兼容性问题，需要在form标签中添加属性enctype=”multipart/form-data”。具体代码如下：

<form enctype="multipart/form-data">
    <input type="file" id="file" name="file">
</form>

二、读取文件内容

读取文件内容时，可以使用FileReader.readAsText()方法。该方法会将文件内容读取为字符串。需要注意的是，FileReader.readAsText()是异步方法，需要在onload事件中获取文件内容。具体代码如下：

let fileInput = document.getElementById('file');
fileInput.addEventListener('change', (e) => {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = (e) => {
        console.log(e.target.result);
    }
});

三、读取二进制文件内容

如果需要读取二进制文件内容，可以使用FileReader.readAsArrayBuffer()方法。该方法会将二进制文件内容读取为ArrayBuffer对象。需要注意的是，ArrayBuffer对象并不能直接显示，需要使用TypedArray或DataView进行解析。具体代码如下：

let fileInput = document.getElementById('file');
fileInput.addEventListener('change', (e) => {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = (e) => {
        let buffer = e.target.result;
        let dataView = new DataView(buffer);
        console.log(dataView.getInt32(0));
    }
});

四、读取图片文件内容

读取图片文件内容时，可以使用FileReader.readAsDataURL()方法。该方法会将图片文件内容读取为Base64编码的字符串。使用标签可以直接显示该图片。具体代码如下：

let fileInput = document.getElementById('file');
fileInput.addEventListener('change', (e) => {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
        let img = document.createElement('img');
        img.src = e.target.result;
        document.body.appendChild(img);
    }
});