JavaScript专精系列(6)——FileReader 文件读取
FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它。
文件处理是一系列的流程,每一步我们都需要知道,自己能做什么,自己做了什么。
第一步,获取文件
前端中,获取文件必须使用input标签。
<input id='file' type='file' />
处理这个文件,必须要用代码的方式,体现出来,让你能用代码操作它。这里主要是使用input标签的onchange事件。
var file = document.getELementById('file');
file.onchange = function(e){var files = e.target.files;//这个files就是获取的file文件的一个数组。之后你可以使用任何方式来操作它。
}
关于file的小知识:前端在读取到files数组之后,可以对得到的文件一些属性进行读取。这些属性分别是:name、size、type、lastModifiedDate。
一个特别重要的点就是判断图片的大小,根据文件的大小进行后续操作。
var file = files[0];//比如这个file是图片
if(file.size > 5000){ //处理压缩操作
}
第二步,读取文件
1、读取文件,主要使用的是FileReader类。它提供了几个方法。
readAsText(file, encoding);
以纯文本形式读取文件,读取到的文本保存在result属性中。第二个参数代表编码格式。
readAsDataUrl(file);
读取文件并且将文件以数据URI的形式保存在result属性中。
readAsBinaryString(file);
读取文件并且把文件以字符串保存在result属性中。
readAsArrayBuffer(file);
读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。
2、文件读取的过程是异步操作,在这个过程中提供了三个事件。progress、error、load事件。
progress-每隔50ms左右,会触发一次progress事件。
error-在无法读取到文件信息的条件下触发。
load-在成功加载后就会触发。
第三步,相关源码
html:
分别用input标签获取文件,span获取文件的进度条,div来查看获取的数据源。
<input id="file" type="file" onchange="fileChange" />
进度:<span id="progress"></span>
<div id="box"></div>
js代码:
//获取页面元素对象
var file = document.getElementById('file');
var output = document.getElementById('box');
var progress = document.getElementById('progress');
//onchange事件
file.onchange = function (e) {console.log(e);var files = e.target.files;var file0 = files[0];console.log(file0.size,file0.name,file0.type);//fileReader对象var fileReader = new FileReader();var type = 'default';//判断文件类型if(/image/.test(file0.type)){fileReader.readAsDataURL(file0);type = 'image';} else {fileReader.readAsText(file0,'utf-8');type = 'text';}//文件加载出错fileReader.onerror = function () {output.innerHTML = 'Could not read file, error code is ' + fileReader.error.code;};//加载成功后fileReader.onload = function () {console.log('onload')var html = '';switch (type) {case 'image':html = '<img src=\"' + fileReader.result +'\">';break;case 'text':html = fileReader.result;break;}output.innerHTML = html;};//进度条进度fileReader.onprogress = function (event) {if(event.lengthComputable) {progress.innerHTML = event.loaded + '/' + event.total;}}
}
JavaScript专精系列(6)——FileReader 文件读取相关推荐
- html5的FileReader文件读取
此文引用:http://blog.csdn.net/jackfrued/article/details/8967667 一:FileReader FileReader是API重要成员用于读取文件,Fi ...
- 【效率专精系列】善用API统一描述语言提升RestAPI开发效率
团队内部RestAPI开发采用设计驱动开发的模式,即使用API设计文档解耦前端和后端的开发过程,双方只在联调与测试时耦合.在实际开发和与前端合作的过程中,受限于众多因素的影响,开发效率还有进一步提高的 ...
- 使用 FileReader进行文件读取
FileReader是什么? FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中Fi ...
- 使用FileReader进行文件读取
FileReader是什么 FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中Fil ...
- javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
- html5 filereader读取文件,H5的FileReader分布读取文件应该如何使用以及其方法简介...
这次给大家带来H5的FileReader分布读取文件应该如何使用以及其方法简介,H5的FileReader分布读取文件的使用以及其方法简介的注意事项有哪些,下面就是实战案例,一起来看一下. 先介绍一下 ...
- JavaScript系列之FileReader
文章の目录 一.概述 二.构造函数 1.语法 三.实例属性 1.error 1.1.语法 1.2.返回值 2.readyState 2.1.语法 2.2.值 3.result 3.1.语法 3.2.值 ...
- h5如何上传文件二进制流_前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输...
HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...
- JavaScript 编程精解 中文第三版 十九、项目:像素艺术编辑器
十九.项目:像素艺术编辑器 原文:Project: A Pixel Art Editor 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了<JavaScript ...
最新文章
- 【Qt】Qt样式表总结(三):QObject 属性
- 简单自学机器学习理论——正则化和偏置方差的权衡 (Part III )
- C#数据结构与算法揭秘15
- CeneOS中使用Docker安装Gitlab
- Paddle 使用预训练模型 实现快递单信息抽取
- “两小学生研究喝茶抗癌获奖”,官方回应:经老师培训独立完成
- 【BZOJ2221】面试的考验,随机数列+线段树+离线
- 40vf什么意思_LED 的基本术语VF、IV、WL、IR 解释及光通量换算关系
- linux 超好用的命令行工具
- springboot中得注解_SpringBoot 中的基本注解
- 【一千个论文合集】计算机科学的26个细分领域近年必读论文集合
- dbscan聚类python_DBSCAN聚类算法Python实现
- fences卸载_Win10系统怎样卸载fences?Win10系统卸载fences图文教程-系统城
- Leetcode013 罗马数字转整数
- charles android 抓取https 出现unknown简单明了的解决教程
- elementui级联选择器Cascader不触发change事件
- ionic 以及cordova apk打包成功,安装不成功,显示Failure [INSTALL_FAILED_CONFLICTING_PROVIDER]
- HR是这样筛选简历的,不知道就完蛋!
- 机器学习实践系列之13 - OpenCV之图像去雾
- 算法设计——质数的乘积
热门文章
- Citrix虚拟化技术之五XenServer6.2资源池配置
- 性能测试之Jmeter:使用代理录制脚本
- layuimini tab切换刷新
- 记录在苹果mac os系统上使用51单片机仿真软件Proteus
- Excel如何将多列数据合并为一列
- TOUGH2系列建模方法及在CO2地质封存、水文地球化学、地热、地下水污染等领域中的应用
- Consider defining a bean of type ‘com.nclg.mall.service.AdminService‘ in your configuration.
- Auto.js UI 列表控件使用方法 数字题计算
- QIIME 2 2020.11发布啦
- 使用Python登录CSDN(最新验证可用)