<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
</head>
<body>
? ? <input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera"/>
? ? <img src="" id="img"/>
? ? <!-- # 解析
? ? # accept 屬性（允許上傳兩種文件類型：gif 和 jpeg）
? ? # capture 捕獲到系統(tǒng)默認(rèn)的設(shè)備，有三個(gè)參數(shù)值可設(shè)置? camera--照相機(jī)； camcorder--攝像機(jī)； microphone--錄音
? ? # js代碼我做了封裝, 參數(shù)一表示 "選擇文件" 的 id，參數(shù)二表示 "顯示圖片" 的 id，
? ? # 若是 ios 只能調(diào)用攝像頭，不能選擇打開相冊的話，就把這個(gè)【capture="camera"】去掉，直接加一個(gè)屬性 multiple -->
? ? <script>
? ? ? ? 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);
? ? ? ? ? ? };
? ? ? ? };
? ? ? ? // # 解析
? ? ? ? // # 參數(shù)在上面 HTML 就已經(jīng)講解了，
? ? ? ? // # file 表示你選中的那個(gè)圖片，然后它里面有幾個(gè)屬性 name、size、type、slice等，也都非常實(shí)用，
? ? ? ? // # FileReader作為文件API的重要成員用于讀取文件，根據(jù)W3C的定義，F(xiàn)ileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型。
? ? ? ? // # 調(diào)用 FileReader 的 readAsDataURL 接口，將啟動異步加載文件內(nèi)容，通過給 reader 監(jiān)聽一個(gè) onload 事件，
? ? ? ? // # 將數(shù)據(jù)加載完畢后，在onload事件處理中，通過 event 的 result 屬性即可獲得文件內(nèi)容，然后扔進(jìn) img 的 src 即可 打開圖片并預(yù)覽。
? ? </script>
</body>
</html>
