FileReader简介
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件。
input:file
<input type="file" id="inputBox">
input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名);file类型的input会有files属性,保存着文件的相关信息。
获取file类型的input元素,然后.files即可打印
input.files简单介绍:
-
input.files是一个数组,由传入的file对象组成。每个file对象包含以下属性:
-
lastModified:数值,表示最近一次修改时间的毫秒数;
-
lastModifiedDate:对象,表示最后一次表示最近一次修改时间的Date对象(高程中说是字符串,根据上图可看出应该为对象,为了层级清晰未对其展开,大家可自行查看,其可调用Date对象的有关方法,例如getDay方法);
-
name:本地文件系统中的文件名;
-
size:文件的字节大小;
-
type:字符串,文件的MIME类型;
-
weblitRelativePath:此处为空;当在input上加上webkitdirectory属性时,用户可选择文件夹,此时weblitRelativePath表示文件夹中文件的相对路径。比如:
<input type="file" #fileUpload webkitdirectory>
FileReader
以上file对象只获取到了对文件的描述信息,但没有获得文件中的数据,而inputBox.value也只是保存的是文件的绝对路径。我们可以通过html5提供的FileReader读取到文件中的数据。
创建实例:
var reader = new FileReader();
方法:
方法定义 | 描述 |
---|---|
abort():void | 终止文件读取操作 |
readAsArrayBuffer(file):void | 异步按字节读取文件内容,结果用ArrayBuffer对象表示 |
readAsBinaryString(file):void | 异步按字节读取文件内容,结果为文件的二进制串 |
readAsDataURL(file):void | 异步读取文件内容,结果用data:url的字符串形式表示 |
readAsText(file,encoding):void | 异步按字符读取文件内容,结果用字符串形式表示 |
事件:
事件名称 | 描述 |
---|---|
onabort | 当读取操作被中止时调用 |
onerror | 当读取操作发生错误时调用 |
onload | 当读取操作成功完成时调用 |
onloadend | 当读取操作完成时调用,不管是成功还是失败 |
onloadstart | 当读取操作将要开始之前调用 |
onprogress | 在读取数据过程中周期性调用 |
angular代码示范
1. readAsDataURL(图片预览)
<input type="file" #fileUpload webkitdirectory>
<button (click)="fileUploadHandle()">读取图像</button>
<div #showImg>
<img src="{{imgUrl}}" alt="" width="400" height="400">
</div>
@ViewChild('fileUpload') fileUpload: any;
@ViewChild('showImg') showImg: any;
imgUrl: any;
fileUploadHandle() {
const file = this.fileUpload.nativeElement; // 获取元素
console.log(file.files);
const fileInfo = file.files[0]; // 获取元素信息
if (!/image\/\w+/.test(fileInfo.type)) {
alert('看清楚,这个需要图片!');
return false;
}
const filereader = new FileReader();
// 将文件以Data URL形式读入页面
filereader.readAsDataURL(fileInfo);
const that = this;
filereader.onload = function() {
console.log(this.result);
that.imgUrl = this.result;
};
console.log(filereader.LOADING);
filereader.onloadend = () => {
console.log('文件读取完成');
};
}
由于媒体文件的src属性,可以通过采用网络地址或base64的方式显示,因此我们可以利用readAsDataURL实现对图片的预览。
2. readAsBinaryString
<input type="file" #fileUpload>
<button (click)="readAsBinaryString()">读取文二进制数据</button>
<div>{{content}}</div>
@ViewChild('fileUpload') fileUpload: any;
content: any;
readAsBinaryString() {
const file = this.fileUpload.nativeElement; // 获取元素
const fileInfo = file.files[0]; // 获取元素信息
const filereader = new FileReader();
// 将文件以二进制形式读入页面
filereader.readAsBinaryString(fileInfo);
const that = this;
filereader.onload = function() {
console.log(this.result);
that.content = this.result;
};
}
3. readAsText
<input type="file" #fileUpload>
<button (click)="readAsBinaryString()">按字符读取文件内容</button>
<div>{{content}}</div>
readAsBinaryString() {
const file = this.fileUpload.nativeElement; // 获取元素
const fileInfo = file.files[0]; // 获取元素信息
const filereader = new FileReader();
// 异步按字符读取文件内容
filereader.readAsText(fileInfo, 'gbk'); // "utf-8"
const that = this;
filereader.onload = function() {
console.log(this.result);
that.content = this.result;
};
}
4. readAsArrayBuffer
<input type="file" #fileUpload>
<button (click)="fileUploadHandle()">按字符读取文件内容</button>
<div>{{content}}</div>
@ViewChild('fileUpload') fileUpload: any;
content: any;
fileUploadHandle() {
const file = this.fileUpload.nativeElement; // 获取元素
const fileInfo = file.files[0]; // 获取元素信息
const filereader = new FileReader();
// 二进制传输
filereader.readAsArrayBuffer(fileInfo);
const that = this;
filereader.onload = function() {
console.log(this.result);
that.content = this.result;
// 调用ajax方法,将二进制流传递到后台
this.ajax(this.result);
};
}
5. 上传图片案例
<input type="file" id="test" #fileUpload name="fileContent">
ngAfterViewInit(): void {
this.fileUploadHandle();
}
fileUploadHandle() {
this.fileUpload.nativeElement.onchange = function() {
const filereader = new FileReader();
const fileType = this.files[0].type; // 获取文件类型
filereader.readAsDataURL(this.files[0]); // 将文件以Data URL形式读入页面
// 文件读取成功完成时触发
filereader.onload = function() {
if (/^image\[jpeg|jpg|png|gif]/.test(fileType)) {
// 无论读取成功或失败,结果存储在result属性中
let data = (this.result).toString();
// 将得到的结果分割获取base64字符串
data = data.split(',')[1];
console.log(data);
}
};
};
}