获取 input框上传文件的内容

需求：
1.通过input框选择需要的文件
2.获取选中文件的文件内容
3.根据文件内容格式，按要求解析
4.封装所需数据格式 echarts渲染

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>

//html部分
请选择文本文件:<input type="file" id="file" />
    <input type="button" id="btn" value="设置模型参数" />
    <div class="check_boxs">
        
    </div>
    <div id="main" style="width: 600px;height:400px;"></div>

var myChart 
    // 1.1 指定图表的配置项和数据
    var option = {
        title: {
            text: '发送机温度'
        },
        tooltip: {},
        legend: {
            data:['温度']
        },
        color:['#601986','#cc0003','#eede04','#01f353','#ff6700','#601986'],
        xAxis: {
            data: ["1","2","3","4","5","6"]
        },
        yAxis: {},
        series: [
            // {
            //     name: 'T1',
            //     type: 'line',
            //     data: []
            // }
        ]
    };
    // 1.2 定义全局变量
    window.gloableData = {
        allArray:[],
        titleArray: [],
        dataArray:[],
        currentIndex: '',
        userDefined:'',
        formTitleLength: ''
    }
    // 1.3 获取需要的标签
    var btn=document.getElementById("btn");
    var checkBoxs = document.getElementsByClassName('check_boxs')[0]
    btn.onclick = function () {
        // 1.4 获取文件内容
        readAsText ()
    }
// 获取文件内容
function readAsText() {
    var file=document.getElementById("file").files[0];
    var reader=new FileReader();
    //var preg = /[1-9][0-9]{1,50}/g ;
    reader.readAsText(file);
    reader.onloadend = function () {
        // console.log('文件读取完毕时触发，无论是否失败')
        //2.1 判断协议号
        judgeProtocol(reader.result)  
        // 2.2 事件委托绑定事件
        checkBoxs.addEventListener('click',fun)
    }
}

// # 分割 判断协议号
function judgeProtocol (data) {
    var allArray = data.split(/[\n\r]/g)
    /* 获取自定义分割符 */
    let userDefined = data.split(' ')[2]
    gloableData.allArray = allArray
    gloableData.userDefined = userDefined
    // 判断是否是协议1
    if(allArray[0].indexOf('1') !== -1) {
        addChackbox(allArray[2])  // 动态添加选框 
        getModelData(allArray)    // 提取数据
    } else {
        alert('请检查协议！！')
    }
}

// 提取数据
function getModelData (data) {
    const dataArray = []
    data.filter((element,index) => {
        return index>6 && element
    }).forEach((element) => {
        if(gloableData.userDefined) {
            dataArray.push(element.split(gloableData.userDefined))
        } else {
            dataArray.push(element.split(' '))
        }
    })
    // console.log(dataArray)
    //数组序列化
    const serializeArray = []
    dataArrayLength = dataArray[0].length
    for (let i=0; i<dataArrayLength; i++) {
        const forArray = []
        for(let j=0;j<dataArray.length; j++) {
            forArray.push(dataArray[j][i])
        }
        serializeArray.push(forArray)
    }
    // console.log(serializeArray)
    gloableData.serializeArray = serializeArray
}

// 动态添加选框 
function addChackbox (obj) {
    // const formTitleArray = obj.split(' ')[1].split(/\s/)
    if (gloableData.userDefined) {
        var formTitleArray = obj.split(gloableData.userDefined)
        formTitleArray[0] = formTitleArray[0].slice(1,formTitleArray[0].length)
        gloableData.titleArray = formTitleArray
    } else {
        var formTitleArray = obj.split(' ')
        formTitleArray.shift()
        gloableData.titleArray = formTitleArray
    }
    gloableData.formTitleLength = formTitleArray.length
    for (let i=0;i<formTitleArray.length;i++) {
        let span = document.createElement('span')
        span.innerText = formTitleArray[i]
        let input = document.createElement('input')
        input.type="checkbox"
        input.name="checkbox"
        input.setAttribute('index', i)
        span.appendChild(input)
        checkBoxs.appendChild(span)
    }
}
    
// 点击事件的回调函数
function fun (event) {
    const el = event.target;
        // 选中选框
    if(el.tagName === 'INPUT' && el.checked) {
        gloableData.currentIndex = +el.getAttribute('index')
        filterArray()
        // 取消选中
    }else if (el.tagName === 'INPUT' && !el.checked) {
        // console.log(el.parentNode.innerText)
        el.parentNode.innerText
        option.series = option.series.filter((element) => {
            return element.name !== el.parentNode.innerText
        })
        // console.log(option.series)
    }
    myChart = echarts.init(document.getElementById('main'));
    // console.log(option)
    myChart.setOption(option);
}

// 过滤需要的数组
function filterArray () {
    const seriesObj = {
        name:'',
        type: 'line',
        data: []
    }
    seriesObj.name = gloableData.titleArray[gloableData.currentIndex]
    seriesObj.data = gloableData.serializeArray[gloableData.currentIndex]
    option.series.push(seriesObj)
}

参考：FileReader 的使用：https://www.jianshu.com/p/582f7fb8c13e