h5 實現調用系統拍照或者選擇照片並預覽

這次又來分享個好東西！

調用手機相機拍照或者是調用手機相冊選擇照片，這個功能在 手機端頁面 或者 webApp 應該是常用到的，就拿個人或會員資料錄入那塊來說就已經是經常會碰到的，

每當看到這塊功能的時候，前端的小伙伴就得去找各種各樣的插件。除非你收藏了什么好東西，或者是你收藏了什么比較舊的、需求跟不上的好東西，需求不一樣體驗不好 那你提交了，產品經理會買你賬嗎？

好了，咱入正題！

這里主要是針對手機端頁面或者webApp的，pc端頁面效果欠佳（有時候點擊選擇按鈕，彈框要等你上完廁所才能彈得出來）

這里分兩塊代碼，分別為 html 和 js

HTML

<input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera"/>
<img src="" id="img"/>

# 解析
# accept 屬性（允許上傳兩種文件類型：gif 和 jpeg）
# capture 捕獲到系統默認的設備，有三個參數值可設置  camera--照相機； camcorder--攝像機； microphone--錄音
# js代碼我做了封裝, 參數一表示 "選擇文件" 的 id，參數二表示 "顯示圖片" 的 id，
# 若是 ios 只能調用攝像頭，不能選擇打開相冊的話，就把這個【capture="camera"】去掉，直接加一個屬性 multiple

js

var upload = function(c, d){
    "use strict";
    var $c = document.querySelector(c),
        $d = document.querySelector(d),
        file = $c.files[0],
        reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        $d.setAttribute("src", e.target.result);
    };
};

# 解析
# 參數在上面 HTML 就已經講解了，
# file 表示你選中的那個圖片，然后它里面有幾個屬性 name、size、type、slice等，也都非常實用，

# FileReader作為文件API的重要成員用於讀取文件，根據W3C的定義，FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型。
# 調用 FileReader 的 readAsDataURL 接口，將啟動異步加載文件內容，通過給 reader 監聽一個 onload 事件，
# 將數據加載完畢后，在onload事件處理中，通過 event 的 result 屬性即可獲得文件內容，然后扔進 img 的 src 即可 打開圖片並預覽。

這個對於前端來說是非常實用的，

不過點擊選擇文件這個按鈕選擇系統文件的時候彈出的操作菜單，是依賴你所使用的瀏覽器的，建議還是用 微信 來測試（最佳），而如果你剛好要弄微信端的頁面，那就再好不過啦！

聲明：本文未經本人允許，嚴禁抄襲 轉載！

覺得得到幫助的可以點個推薦，讓更多人也可以得到幫助。