第一步,获取文件信息
<input type="file"/>
<script>
const fileElement = document.querySelector('#file');
fileElement.addEventListener('change', (e) => {
const file = e.target.files[0];
})
</script>
创建FileReader读取文件数据
FIleREader介绍
<input type="file"/>
<script>
const fileElement = document.querySelector('#file');
fileElement.addEventListener('change', (e) => {
const file = e.target.files[0];// 文件信息
if (file) {
const reader = new FileReader();
reader.readAsText(file);// 将文件读取为文本
reader.onload = () => { // 文件读取完成后的回调
console.log(reader.result, ''); // 读取到的文件内容
}
reader.onerror = (e) => {
console.log(e, '????XXX')
}
}
})
</script>