H5从相册选择图片和从摄像头选择图片
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html5在手机端调用摄像头拍照和选择手机相册 - 我爱模板网 www.5imoban.net</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui, shrink-to-fit=no">
<style>
body {font-family: Arial, Roboto, 'Droid Sans', 'Hiragino Sans GB', 'Microsoft YaHei', 'Simsun', STXihei, 'sans-serif';font-size: 14px;}
dl:not(:last-child) {overflow: hidden;padding: 10px;margin-bottom: 10px;border-bottom: 1px dashed #dedede;}
dt {padding-bottom: 10px;font-weight: bold;color: #f32600;}
dd {margin: 0;padding:5px 0 0 20px;border-left: 2px solid #cddc39;}
</style>
</head>
<body>
<dl>
<dt>普通没有 <code>capture</code> 属性</dt>
<dd><input type="file"></dd>
<dd><p>没有 <code>capture</code> 捕获属性时，仅为选择上传文件。</p></dd>
<dt><code>capture=""</code> 为空的时候</dt>
<dd><input type="file" capture=""></dd>
<dd><p>当 <code>capture</code> 捕获属性为空时，基于 <code>capture</code> 的值为布尔值类型，所以这个时候可以看到启用了摄像头，<strong>后置摄像头</strong>开启拍照或者录像功能。</p></dd>
<dt><code>capture="user"</code> 前置摄像头</dt>
<dd><input type="file" capture="user"></dd>
<dd><p>当 <code>capture</code> 捕获属性为 <code>user</code> 时，开启前置摄像头的拍照或者录像功能。</p></dd>
</dl>
<dl>
<dt>类型：视频 多个文件</dt>
<dd><input type="file" accept="video/*" multiple=""></dd>
<dd>
<p>选择多个<strong>视频</strong>类型文件，未使用 <code>capture</code> 属性时。</p>
</dd>
<dt>类型：图片 多个文件</dt>
<dd><input type="file" accept="image/*" multiple=""></dd>
<dd>
<p>选择多个<strong>图片</strong>类型文件，未使用 <code>capture</code> 属性时。</p>
</dd>
<dt>无类型要求 多个文件</dt>
<dd><input type="file" multiple=""></dd><dd>
<p>选择多个<strong>视频</strong>或者<strong>图片</strong>类型文件，未使用 <code>capture</code> 属性时。</p>
</dd>
</dl>
<dl>
<dt><code>capture="user"</code> 前置摄像头 视频</dt>
<dd><input type="file" capture="user" accept="video/*" multiple=""></dd>
<dd>
<p>使用 <code>capture="user"</code> 开启前置摄像头时，设定为<strong>视频</strong>类型文件，手机中不会显示<em>照片</em>，同时 <code>multiple</code> 多文件上传无效。</p>
</dd>
<dt><code>capture="user"</code> 前置摄像头 图片</dt>
<dd><input type="file" capture="user" accept="image/*" multiple=""></dd>
<dd>
<p>使用 <code>capture="user"</code> 开启前置摄像头时，设定为<strong>图片</strong>类型文件，手机中不会显示<em>视频</em>，同时 <code>multiple</code> 多文件上传无效。</p>
</dd>
</dl>
<p style="padding-top:50px; text-align:center;">
<a href="http://www.5imoban.net" target="_blank" style="color:#999;">我爱模板网</a>
</p>
</body>
</html>
点击input type=file时直接开启摄像头拍照：
<input type="file" capture="user" accept="image/*" multiple="">