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 便可 打開圖片並預覽。

這個對於前端來講是很是實用的，

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

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

以爲獲得幫助的能夠點個推薦，讓更多人也能夠獲得幫助。