FileReader类型之文字读取
一、什么是FileReader类型?
FileReader类型实现的是一种异步文件读取机制,通常可以用于读取文本文件和图片文件,而本文只单独讲讲文本文件的读取。
使用FileReader读取文本文件内容主要用到以下方法、事件和属性:
方法: readAsText()
事件: load
属性: result
二、结合具体实例讲解文字读取流程
1. HTML结构
主要用到input元素,type属性值为file,用于从本地获取文件。
<input type="file" id="file" />
通过以上代码在选择文件时一次只能选择一个,若要一次选择多个文件,可在标签上加上multiple="multiple"
属性值,或者直接写multiple
。
<input type="file" id="file" multiple="multiple" />
或者:
<input type="file" id="file" multiple />
2. 给input元素加上change事件
var file = document.getElementById("file");
file.addEventListener('change',function(){//........
});
当我们点击按钮并成功选择文件时会执行以下 3 中的代码。
3. 读取文本文件中的文字内容
① 获取已从本地选择的文件
var fileVal = this.files[0]; // 获取所选文件中的第一个文件
这里用到了 File API,每个 File 对象对应一个文件,每个 File 对象有下面几种属性:
name: 本地文件名
size: 文件的字节大小
type: 文件的 MIME 类型
lastModifiedDate: 文件上一次被修改的时间
比如想要获取文件名可以这样写:
var fileName = this.files[0].name // 获取到的文件名中包含文件后缀
② 新建 FileReader 对象
var reader = new FileReader();
③ 读取文件中的文字内容
reader.readAsText(fileVal,'gb2312');
readAsText() 用于将文件中的内容以纯文本的形式读取,读取到的文本会保存在 result 属性中(注意该方法执行没有返回值),可传入两个参数:文件对象和文本编码类型。
注意: 这里第二个参数最好写上'gb2312'
编码类型,否则可能出现文字乱码问题。
④ 文件读取成功后输出文本内容
reader.onload = function(){var text = this.result;console.log(text);
};
通过 readAsText() 方法读取到的纯文本内容保存在 result 属性中。
三、最终完整实例代码
为了让大家能够从整体上更加清晰的了解文字读取的流程,在此贴上以上实例中的完整代码:
<!--HTML部分-->
<input type="file" id="file" multiple />
// JavaScript部分
var file = document.getElementById("file");
file.addEventListener('change',function(){var fileVal = this.files[0];var reader = new FileReader();reader.readAsText(fileVal,'gb2312');reader.onload = function(){var text = this.result;var p = document.createElement('p');p.innerHTML = text.split('\n').join('<br>');document.body.appendChild(p);};
});
以上代码中,text.split('\n').join('<br>')
的作用是将文本文件中的换行符转换为<br>,\n代表文本回车换行。
FileReader类型之文字读取相关推荐
- python读取xls数据_python_从.mat与.xls类型文件中读取数据
从.xls类型文件中读取数据 在写机器学习算法的时候从UCI下载了一些数据,但是格式不是csv,而是.txt/.data,可以先用excel打开数据,在excel中将数据进行分列后导入python进行 ...
- Mybatis解决数据库Blob类型存储与读取问题
1.Blob介绍 首先,先简单介绍下数据库Blob字段,Blob(Binary Large Object)是指二进制大对象字段,顺带介绍下Clob类型,Clob(Character Large Obj ...
- java将clob类型文件写到磁盘_Java对Oracle中Clob类型数据的读取和写入
Java对Oracle中Clob数据类型是不能够直接插入的,但是可以通过流的形式对clob类型数据写入或者读取,网上代码并不算特别多,讲的 Java对Oracle中Clob数据类型是不能够直接插入的, ...
- oracle怎么截取long类型,Oracle 数据库中 Long 类型字段的读取
最近在一个项目中遇到了需要读取 Oracle 数据库中的 Long 类型的字段的问题,折腾了好久,最后找到了其中的一个解决办法,决定记下了做个明灯吧! 在用 Mybatis 将该字段的数据映射到 St ...
- mysql 读取clob数据类型_谈谈有关各数据库Blob、Clob类型字段的读取、保存更新
经常有人谈到Blob类型字段的读写问题,我也来说两句. 最近在写一些东西,对常用数据库的数据类型.函数等作了一些比较,也写了许多了的测试代码,以下是我测试的结果: 测试数据库: MS Sql Serv ...
- clob在java里的类型_Java对Oracle中Clob类型数据的读取和写入(转)
Java对Oracle中Clob数据类型是不能够直接插入的,但是可以通过流的形式对clob类型数据写入或者读取,网上代码并不算特别多,讲的也不是很清楚,我对网上资料进行了整理和总结,具体看代码: 写入 ...
- 数据转换成tfrecord类型并完成读取
前提: tensorflow --1.13.1 numpy --1.16.2 python --3.6.5 本例转换 泰坦尼克号数据集 链接 密码:n8wz 数据预览: 字段说明: Passenger ...
- python中将npz类型的数据读取出来 并将其存储在excel表格
1 导包 import xlwings as xw import pandas as pd import numpy as np 2 以国民经济核算季度数据.npz为例子 先上图存储为excel成功后 ...
- C++Opencv中Mat类型创建与读取某点像素值
1.创建Mat,包含数据类型: Mat img: img.create(Size,type); 其中 type类包含: CV_8UC1.CV_8UC3.CV_32S.CV_32F等,16.64位用的少 ...
最新文章
- mysql查询不同用户的最新一条记录
- DEV控件自定义排序实现
- MapReduce基础开发之八HDFS文件CRUD操作
- 深度学习(DL)与卷积神经网络(CNN)学习笔记随笔-04-基于Python的LeNet之MLP
- 语音幅度统计-matlab-有问题
- 【spring boot】支持webjars
- 搜狗输入法电脑版_搜狗输入法就是垃圾!!!大大的垃圾!
- iOS微博项目(七)发微博和定位
- Wolfram Mathematica 13 for Mac(功能广泛的科学计算软件)中文版
- 《团队作业第三、第四周》五小福团队作业--Scrum 冲刺阶段--Day7
- java 幂函数_java的math常用方法
- [轉]让PHP支持像jQuery那样的链式操作
- 联想怎么启用计算机的无线功能,IdeaCentre B3系列电脑无线连接中心的使用方法...
- 『深度实战』天池小目标检测大赛·宫颈癌风险智能诊断推荐
- 南水北调中线调水量仅占丹江口水库水量1/4
- Happy Programming Contest(01背包)
- python设置清华源镜像
- 蓝桥杯 算法练习 数字游戏
- 实现radio取消选中的功能
- M1安装gradle查看版本后失败的解决办法
热门文章
- Python 中文编码
- android tools ignore,android 中tools:ignore=UselessParent这个属性的含义是什么?
- html固定中心,css 两边固定中间自适应布局的实现
- csv python 图片 存_Python|任意网页中的所有网址的保存
- 各类木材强度_木材的力学性能
- 揭开并发包底层AQS的神秘面纱
- java变量设置_java的安装与环境变量设置
- halcon知识:【2】二维码原理
- halcon知识:ncc_model模板匹配
- order by 空值排在最后_当梅根·马克尔最后一次皇室活动选择选择翡翠绿时证明她非常时髦...