前端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。。。。    }}

福利链接：

FileReder对象使用手册

好了，听首歌吧：

http://music.163.com/#/song?id=2919622