简单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);