html读取本地文件内容

3,086 阅读1分钟
第一步,获取文件信息
<input type="file"/>
<script>
 const fileElement = document.querySelector('#file');
 fileElement.addEventListener('change', (e) => {
     const file = e.target.files[0];
 })
</script>
创建FileReader读取文件数据

FIleREader介绍

https://blog.csdn.net/xianweizuo/article/details/88911364<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>