AJAX技术实现浏览器分片上传文件

AJAX技术实现浏览器分片上传文件

本技术一定要支持XMLHttpRequest Level 2的浏览器环境下运行（简单来说是IE9以下不支持），设计的主要思路如下：

• File对象转换为FormData对象
• 对FormData对象进行切片
• 使用AJAX技术上传分片并监控上传信息

---

File对象转换为FormData对象

file对象
file对象是我们从input[type=”file”]标签（常用的文件输入框）与drop事件（常用的拖拽文件动作）中获取到的，记录文件信息的对象，我们可以从中获取到诸如文件名称name，文件大小size，文件类型type，文件内容file等属性值。

本质上，file对象是一种升级后的blob对象（表示一个不可变的, 原始数据的类似文件对象），我们可以采用同样的办法将某些文件中获取到的底层二进制流按照此办法进行分片传输，从而提高我们传输文件的效率和可操作性（比如某些时候我们一个文件夹中存储了多个图片、记录等二进制数组信息，我们可以按照文件标准对blob进行slice操作截取出需要进行上传的某一片目标段落进行上传，避免浪费大量资源在传输多余的信息内容上）。

FormData对象
FormData则是我们进行表单提交时产生的对象，效果与form标签整理页面数据的功能相同，本质上FormData就是form标签从html页面上提取输入信息后整理出的包含数据的对象。XMLHttpRequest Level 2接口的引入，使得在新式浏览器上，我们可以通过new FormData();的方式初始化一个空白的表单数据对象，通过append方法为其中添加数据。

//下面这个formData表单数据对象中就会包含有文件大小size，文件类型type，文件名称name和文件内容file信息
function fileToFormData （file）{
    var formData = new FormData();
    formData.append("file",file);
    formData.append("name",file.name);
    formData.append("type",file.type);
    formData.append(