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