Js 读取本地TXT文件内容

8,611 阅读1分钟

利用input的type="file"属性,和FileReader方法实现前端读取本地txt文件。

html:

   <input
       type="file"
       class="read-local-txt-input"
       id="readTxt"
       accept=".txt">
   </input>

js:

// 给当前上传文件button添加监听事件,一般初始化的时候就可以执行
 getInputTxt() {
    this.txtDom = document.getElementById('readTxt');
    this.txtDom.addEventListener('change', this.updateTxt, false);
},

updateTxt(e) {
    let selectedFile = document.getElementById('readTxt').files[0];
    let reader = new FileReader(); // 读取TXT起重要作用的
    reader.readAsText(selectedFile);
    reader.onload = oFREvent => { // 读取完毕从中取值
        let pointsTxt = oFREvent.target.result;
        console.log('pointsTxt', pointsTxt) // 获取到的TXT文件
    };
    e.target.value = null;
},
// 一定要记得最后一处监听器哦
removeTxtDomListener() {
    this.txtDom.removeEventListener('change', this.updateTxt, false);
}