HTML5调用照相机并自定义显示获取到的图片（FileReader）

越来越多的移动端网页流行，在手机上拍摄照片或者从相册中选取照片并上传的功能不可或缺。本文以实例说明上述功能如何实现，并介绍FileReader对象。

1. 需求

如下图，点击有加号的框，拍摄或者从相册中选择照片后，将图片显示在框中。

2. 代码

(1) 调用手机拍照和选择照片

<div className="image-uploader">    <input id="imgInput" className="imgInput" type="file" accept="image/*" />    <img id="imgShow" className="imgShow" src="#" alt="" />    <img className="camera" src={cameraImage} alt="" />    <img className="plus" src={plusImage} alt="" /> </div>

CSS思路是把input框，也就是实际的可点击的做成和外框一样大，并且设置opacity：0，放在最上层。#imgShow也需要和外框一样大，显示获取的图片。

(2) 显示图片

监听input的change事件，实例化FileRead对象，将内容读取到内存中。加载结束后，触发onload事件，通过其result属性访问图片数据。

$('#imgInput').change(function () {   readURL(this);});readURL function(input){  if (input.files && input.files[0]) {    const reader = new FileReader();    reader.readAsDataURL(input.files[0]);    reader.onload = (e) => {        $('#imgShow').attr('src', e.target.result);      };   } }

3. 关于FileReader

(1) FileReader对象方法

FileReader对象方法有4种，有3种用来读取文件，1种用来中断读取。方法不会返回读取结果，而是将结果存储在result属性中，如果读取失败result的值为null。

方法名 参数 描述 abort none 中断读取 readAsBinaryString file 将文件读取为二进制码 readAsDataURL file 将文件读取为 DataURL readAsText file, [encoding] 将文件读取为文本

上例中，使用readAsDataURL的方式，读取图片路径。

(2) 事件

事件 描述 onloadstart 读取开始时触发 onprogress 读取中 onload 文件读取成功，完成时触发 onloadend 文件读取成功或失败，完成时触发 onabort 中断时触发 onerror 出错时触发

---

参考：
https://www.w3.org/TR/file-upload/#FileReaderSync
https://www.html5rocks.com/zh/tutorials/file/dndfiles/
http://blog.csdn.net/jackfrued/article/details/8967667