实现图片上传时即时显示

使用HTML5中的 FileReader 实现图片上传时使图片即时显示，图片显示等比例缩放。

实现效果：

FileReader：

构造函数：FileReader()

属性：

FileReader.error ：表示在读取文件时发生的错误 。

FileReader.readyState：表示FileReader状态的数字。取值如下：

常量名	值	描述
EMPTY	0	还没有加载任何数据.
LOADING	1	数据正在被加载.
DONE	2	已完成全部的读取请求.

FileReader.result ：文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件：

onabort：读取文件中断片刻时触发

onerror：读取文件错误时触发

onload：文件读取成功完成时触发

onloadend：读取完成时触发，无论成功还是失败

onloadstart：开始读取时触发

onprogress：读取文件过程中持续触发

方法：

FileReader.abort()：中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer()：开始读取指定的Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。

FileReader.readAsBinaryString()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储。

FileReader.readAsDataURL()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。

FileReader.readAsText()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容，默认编码是utf-8。

实现代码：

HTML：

<form action="">
        文件：<input type="file" name="myfile" id="myfile" onchange="getFileContent()"/> 
        <br/>
        <input type="submit" />
    </form>
    <div class="img-content"><img src="" /></div>

CSS:

.img-content{
        width:200px;
        height:200px;
    }
    .img-content>img{ /*等比例缩放*/
        width: auto;  
        height: auto;  
        max-width: 100%;  
        max-height: 100%;    
    }

JavaScript：

function getFileContent(){
            //1 创建文件读取对象
            let reader = new FileReader();
            //2 读取文件，获取DataURL
            var file = document.querySelector('#myfile').files[0];
            reader.readAsDataURL(file);
            //3 当文件读取成功完成
            reader.onload = function(){
                //3.1 设置图片的src属性为获取文件的 URL格式的Base64字符串
                document.querySelector('img').src = reader.result;
            }
        }