越來越多的移動端網頁流行，在手機上拍攝照片或者從相簿中選取照片並上傳的功能不可或缺。本文以例項說明上述功能如何實現，並介紹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);
});
function readURL(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。

上例中，使用readAsDataURL的方式，讀取圖片路徑。

(2) 事件