h5上传文件的方法

h5上传文件的方法：

H5标签提供了原生的 input[type=file] 标签支持文件上传功能。类似于表单提交，文件上传有两种，同步和异步，同步无法获得上传工程中的进度，异步是采用ajax方式上传，实时获得上传进度等信息。
异步上传文件，文件编码格式采用 multipart/form-data （https://segmentfault.com/a/1190000008791342#articleHeader3），原生对象 XMLHttpRequest 提供了 xhr.upload.onprogress 事件，xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。（https://segmentfault.com/a/1190000004322487）。（http://www.ruanyifeng.com/blog/2012/08/file_upload.html）
异步上传文件中其实还包含了一个文件读取的过程。异步上传文件的过程，首先是读取文件，返回一个文件对象，这时可以对文件对象进行读取操作。读取前需要新建一个fileReader对象， new FileReader();fileReader事件处理有6种：

1. onabort:文件读取终端，触发。
2. onerror:文件遇到错误触发。
3. onload:文件成功读取触发。
4. onloadstart:文件开始读取时触发。
5. onloadend:文件读取结束时触发（无论成功失败）。
6. onprogress:文件读取中触发。

fileReader读取方法，5种。

1. FileReader.abort()。中断读取操作，读取状态返回为done，即readyState=2。
2. FileReader.readAsArrayBuffer()。将文件读取为ArrayBuffer形式。
3. FileReader.readAsBinaryString() 。将文件读取为二进制字符串（非标准方法，不推荐使用）。
4. FileReader.readAsDataURL()。读取文件的URL,应用场景，本地预览图片。
5. FileReader.readAsText()。将文件已文本形式读取。即读取txt等。
   （http://blog.csdn.net/j_bleach/article/details/53574789）
   ajax上传文件的过程其实就是向后端发送数据的过程，只是数据不再是普通的json数据，而是原生表单数据结构，这时我们就需要手动建立一个表单数据结构，将文件对象放进表单数据结构里：

var formData = new FormData(); 
formData.append("file", document.getElementById('file').files[0]); 
var xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadurl');
// 上传完成后的回调函数
xhr.onload = function () {
 if (xhr.status === 200) {
　　console.log('上传成功');
 } else {
 　console.log('上传出错');
 }
};
// 获取上传进度
xhr.upload.onprogress = function (event) {
 if (event.lengthComputable) {
   var percent = Math.floor(event.loaded / event.total * 100) ;
   // 设置进度显示
   $("#J_upload_progress").progress('set progress', percent);
 }
};
xhr.send(formData);