移动端文件上传和图片压缩

HTML5中，input 元素新增 accept，capture 属性可用于在手机端调用相册和相机。

• 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')