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

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

windows 搜索文件内容 txt 、excel 、word、c、java 、压缩文件等文件内容
我的系统是win10,win7好像也可以方法一直接在搜索的位置输入内容:要搜索的文件里面内容的关键字.如下图: 注:这样搜索只有列出文件里的内容包含搜索内容的文件,与文件名无关. 方法二直 ...
springboot实现excel的上传并解析文件内容
因为老大说表单填写评分太麻烦了,所以就要求我们改成excel表格上传进行评价:所以我一直没写过就只能自己摸索摸索了: 到了今天调试基本没有问题了.下文将是完整的代码,没有涉及到数据库.我现在的目的是先 ...
Injected script—web 自动化测试技术原理解析，以TestCafe为例
这里写自定义目录标题前言简介 TestCafe执行流程小结前言相比于依赖于不同浏览器插件的特定webDriver,通过wire protocol与浏览器建立通信而实现的selenium自动化 ...
java ftp读取文件内容_java读取ftp中TXT文件的案例
最近在开发关于java读取ftp中TXT文件,其中有些坑踩了一下,再次做个记录 1.读取文件时我会根据文件名称去生成数据库表,oracle数据库对于表名的长度是有限制的,最多30个字符 2.对于多个文 ...
java 下载文件内容为空_java 下载文件内容为空。
Java日志使用slf4j 配置log4j后,有日志文件但日志文件内容为空 SLF4J的全称是Simple Logging Facade for Java,即简单日志门面. SLF4J并不是具体的日 ...
Web 前端开发技术 —— JavaScript
Web 前端开发技术 -- JavaScript 总结 JavaScript 内容! 文章目录 Web 前端开发技术 -- JavaScript 一.js 的引用方式与执行顺序 1.引用方式在标签中 ...
Java File文件流读取文件夹内的文件并替换文件内容
Java File文件流读取文件夹内的文件并替换文件内容一.前言二.代码三.运行结果一.前言批量读取文件夹内的文件,并替换各个文件的内容二.代码新建一个普通 Java 项目就可以,创建文 ...
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结 1.1. 理解Atwood定律 1 1.2. H5做出个html的ui是很方便的,跨平台 2 1 ...
Atitit 使用h5技术 html css js 制作桌面程序gui界面解决方案attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...