File​Reader(文件上传)的基本使用

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);

                }
            };
        };
    }