HTML5中,input 元素新增 accept,capture
属性可用于在手机端调用相册和相机。
浏览器支持:Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 6 都支持。
大致规范如下:
1.当
accept="image/*"
时,capture=“user” 调用前置照相机,capture=“其他值” 调用后置照相机。
2.当
accept="video/*"
时,capture=“user” 调用前置录像机,capture=“其他值” 调用后置录像机。
3.当
accept="image/*,video/*
,capture=“user” 调用前置摄像头,capture=“其他值” 调用后置摄像头,默认照相,可切换录像。
4.当
accept="audio/*"
时,capture=“任意值”,调用录音机。
5.当input没有 capture 时,根据 accppt 类型给出文件夹选项以及摄像头或者录音机选项。
6.input含有 multiple 时访问文件夹可勾选多文件,无 multiple 时都只能单文件。
7.accept 属性接受一个逗号分隔的 MIME 类型字符串, 如:
accept=“image/png” 或 accept=".png" 时,只接受 png 图片.
accept=“image/png, image/jpeg” 或 accept=".png, .jpg, .jpeg" 时,接受 PNG/JPEG 文件.
accept=“image/*” 时,接受任何图片文件类型.
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"时,接受任何 MS Doc 文件类型.
<!-- 调用相机和图片库 -->
<input type="file" accept="image/*">
<!-- 直接调用相机 -->
<input type="file" accept="image/*" capture="camera">
<!-- 调取视频录像 -->
<input type="file" accept="video/*" capture="camcorder">
<!-- 调取音频和文件库(ios中有差异) -->
<input type="file" accept="audio/*" capture="microphone">
<!-- 图片多选 -->
<input type="file" multiple="multiple" accept="image/jpeg"/>
但是安卓 和 IOS 中调取相册和相机机制不同,安卓比较不遵守规范。如果手机端上传图片时,期望能同时吊起照相和图片库,可使用以下兼容方式:
<!-- 安卓 和 IOS 中吊起相机和图片库 -->
<input type="file" accept="image/*"/>
不管是直接选择文件还是拍照等,得到的文件流资源都存放在 input 对象 files
属性里。该属性返回一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表。
var inp = documrnt.getElementsByTagName('input')[0];
var file = inp.files[0]; //文件流对象
每个 File 对象包含了下列信息:
name: – 文件名.
lastModified: – UNIX timestamp 形式的最后修改时间.
lastModifiedDate: – Date 形式的最后修改时间.
size: – 文件的字节大小.
type: – DOMString 文件的 MIME 类型.
文件流(File 对象)常用处理方法
1.将 file 文件流转为 url(blob)地址。 window.URL || window.webkitURL
<img src="" id="img">
<input type="file" id="file">
<script>
var myURL = window.URL || window.webkitURL; //兼容写法
var img = document.getElementById('img');
var file = document.getElementById('file')