简单HTML5移动端客户端图片上传

上传我们一般都是用“input[type=file]”控件。当你用此控件时，你就授权了网页和服务器访问对应的文件，就可以得到 File 对象。

1. accept 属性

该属性表明了服务器端可接受的文件类型，可以限制你手机选择相关的文件，如果限制多个，可以用逗号分割，下面的代码就表示只能选择图片与音频相关的文件

<input accept="image/*,audio/*" type="file"/>

2. change 事件

一般选择文件都会使用“change”事件，下面的代码就是绑定了 change 事件，弹出文件大小

var upload = document.getElementById('upload');
upload.addEventListener('change', function() {var file = upload.files[0];
  alert(file.size);
}, false);

有些手机浏览器在点击的时候，会弹出键盘选择，我用 onfocus=”this.blur()”，来强制失去焦点

<input type="file" id="upload" onfocus="this.blur()"/>

3. File 对象

用户所选择的文件都存储在了一个 FileList 对象上，其中每个文件都对应了一个 File 对象
File 对象负责处理那些以文件形式存在的二进制数据，也就是操作本地文件
File 对象是 Blob 的特殊类型，即大块的二进制数据，File 对象的尺寸及类型等属性都继承自 Blob

File 对象可以通过 3 种方式获取

1. <input> 元素上选择文件后返回的 FileList 对象中的成员
2. 拖放操作【Drag 或 Drop】生成的 DataTransfer 对象内 files 属性中的成员

document.getElementById('upload').files[0]// 选取第一个文件对象 

4. formData

利用 FormData 对象，可以使用键值对来模拟一个完整的表单，然后使用 XMLHttpRequest 发送这个 ” 表单 ”
使用 FormData 的最大优点就是我们可以异步上传一个二进制文件

  var formData = new FormData();
  formData.append("name", "value");// 普通键值对
  formData.append("blob", blob); // 传递一个 blob 对象
  formData.append("file", file); // 传递一个 file 对象
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "http://xx.com");
  oReq.send(formData);