1. html/ js代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" />
<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css">
</head>
<body onload="startTime()">
<div class="mui-card" style="height: 20%;">
<div class=" mui-card-media">
<img class="a" id="img" />
<label for="myFile">
<span id="format" class="a mui-icon mui-icon-camera" style="font-size: -webkit-xxx-large;"></span>
</label>
<input style="display: none;" type="file" capture="camera" id="myFile" onchange="upload('#myFile', '#img');" />
</div>
</div>
<script src="../../js/mui.js"></script>
<script src="../../js/mui.picker.min.js"></script>
<script src="../../js/host.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**拍照
* @param {Object} c
* @param {Object} d
*/
var upload = function(c, d) {
"use strict";
var $c = document.querySelector(c),
$d = document.querySelector(d),
file = $c.files[0],
picPath = $c.value,
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
$d.setAttribute("src", e.target.result);
};
localStorage.setItem('picPath', picPath);
};
</script>
</html>
2. 參數解析：
1. accept 屬性（允許上傳兩種文件類型：gif 和 jpeg）
2. capture 捕獲到系統默認的設備，有三個參數值可設置
3. camera--照相機；camcorder--攝像機； microphone--錄音
4. js代碼做了封裝, 參數一表示 "選擇文件"的 id，參數二表示 "顯示圖片" 的 id，
5. 若是 ios 只能調用攝像頭，不能選擇打開相冊的話，就把這個【capture="camera"】去掉，直接加一個屬性 multiple
6. file 表示你選中的那個圖片，然後它裏面有幾個屬性 name、size、type、slice等，也都非常實用，
7. FileReader作爲文件API的重要成員用於讀取文件，根據W3C的定義，FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型。
8. 調用 FileReader 的 readAsDataURL 接口，將啓動異步加載文件內容，通過給 reader 監聽一個 onload 事件，
9. 將數據加載完畢後，在onload事件處理中，通過 event 的 result 屬性即可獲得文件內容，然後扔進 img 的 src 即可 打開圖片並預覽。
3. 效果展示：
點擊拍照的圖標，如果在web端就是瀏覽文件上傳，手機端可進行拍照功能。
