一、选取文件
使用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);
}
});
原创文章，作者：SXQU，如若转载，请注明出处：https://www.506064.com/n/148974.html
微信扫一扫 
支付宝扫一扫 