JavaScript使用FileReader读取文件

FileReader是前端进行文件处理的一个重要的web api,特别是在对图片的处理上。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

示例代码

html

<input id="file" type="file" οnchange="fileChange" />
进度:<span id="progress"></span>
<div id="box">
</div>

用input标签获取文件,span获取文件的进度条,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;
}
}
}

示例说明

一、获取页面file的input,然后对file进行onchange监控。

var file = document.getELementById('file');
file.onchange = function(e){
var files = e.target.files;
//...
}

e.target.files获取文件数组。通过下标可以获取文件对象。

获取到文件对象的属性有:name、size、type、lastModifiedDate。

二、使用FileReader类读取文件

FileReader读取文件方法如下:

  • readAsText(file, encoding):以纯文本形式读取文件,读取到的文本保存在result属性中。第二个参数代表编码格式。
  • readAsDataUrl(file):读取文件并且将文件以数据URI的形式保存在result属性中。
  • readAsBinaryString(file):读取文件并且把文件以字符串保存在result属性中。
  • readAsArrayBuffer(file):读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

三、FileReader事件监控

FileReader类提供了三个事件:progress、error、load。我们可以对这三个事件进行监控。

  • progress:每隔50ms左右,会触发一次progress事件。
  • error:在无法读取到文件信息的条件下触发。
  • load:在成功加载后就会触发。

版权声明:著作权归作者所有。

相关推荐

使用Python下载文件(大文件,重定向文件)

在网络上很多文件是使用http的方式提供下载。使用python做爬虫,爬文件是其中一个目标。Python有很多包可以做http请求,如下:python内置的包: urllib,urllib2和urllib3requests包,这是一个在urllib3上扩展的包grequests,扩展requests包,用来处理异步的http功能。这里使用requests来做文件下载,主要提供三种示例:小文件的爬取

Python读取.wav音频文件

可以使用scipy.io.wavfile.read(somefile)来读取.wav音频文件。它会返回一个元组,第一项为音频的采样率,第二项为音频数据的numpy数组。用法:from scipy.io import wavfilefs, data = wavfile.read('./output/audio.wav')也可以使用PySoundFile,它也是返回一个元组,指示第一项为数据,第二项为

读取yaml文件的shell脚本

脚本如下:#!/bin/bashfunction parse_yaml() { local yaml_file=$1 local prefix=$2 local s local w local fs s='[[:space:]]*' w='[a-zA-Z0-9_.-]*' fs="$(echo @|tr @ '\034')" (

Linux使用find查找大文件

Linux可以使用find命令来查找大文件。语法find <path> [-type <file-type>] -size +<size><unit> -type:指定文件类型,它有这些值d:目录f:普通文件l:链接b: 缓存块c: 非缓存字符p:  pipes

Nginx gzip对javascript文件压缩无效

问题Nginx从1.0.15升级到1.12.1后,原来开启的gzip对javascript文件压缩失效了。原来nginx的gzip相关配置如下gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types text/plain applicati