前端H5技术实现解析文件内容（txt为例）

背景

在做项目的时候经常遇到上传文件解析内容的功能，平常常用的做法是上传文件到服务端，然后解析完毕后输出前端。但更常见的只是解析内容而已，无须上传文件到服务端，更没有必要将数据前后端流转加重服务端压力。以前之所以这么做是因为安全机制，涉及到数据的处理基本都在后端实现，但是随着浏览器端技术的迭代更新，H5技术强大之处逐渐凸显，感谢H5。废话不多说，贴代码

首先，大前端HTML：

<input type="file" value="导入范围" id="upload" style="display:none;" onclick="return fileUpload_onclick()" onchange="return fileUpload_onselect()"/>
<input type="button" value="导入范围" id="import"> 
<input type="button" value="勾绘范围" id="draw"/>

之所以用到display：none，是因为file 空间着实太丑了。这里变相的用其他控件模拟实现点击。具体实现如下：

$("#import").click(function(){
          
   
   $("#upload").click();//代码去触发点击
})

其次，大前端JS:

/**
 * 点击触发
 */
function fileUpload_onclick(){
}
/**
 * 选中文件后触发
 * 直接前台解析txt文件。使用的是FileReader对象
 */
function fileUpload_onselect(){
    console.log("onselect");
    var path = $("#upload").val();//文件路径
    console.log(path);
    var selectedFile = document.getElementById("upload").files[0];
    var name = selectedFile.name;//读取选中文件的文件名
    var size = selectedFile.size;//读取选中文件的大小
    console.log("wenjianming:"+name+"daxiao:"+size);
    var reader = new FileReader();//这是核心！！读取操作都是由它完成的
    reader.readAsText(selectedFile);

    reader.onload = function(oFREvent){
         
  //读取完毕从中取值
        var pointsTxt = oFREvent.target.result;
        // your code。。。。
    }
}

福利链接：

好了，听首歌吧：