我们在进行文件上传，首先从前台开始，有两种方案，第一种是使用表单上传，第二种是使用ajax上传，前者相对容易，如果想要无刷新上传则需要使用后者。接下来一一将起，先从表单的方式。

1：表单文件上传
表单的前台上传其实上很简单，只需要设置好enctype=”multipart/form-data”这个属性就好了。然后在后台进行处理，我们先来实例一下。

<form action="/file_take" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传">
</form>

2.ajax文件上传
我们想要通过ajax实现文件上传，就必须要使用formdata这个对象，首先我们从获取文件开始。
可能大家最开始都会以elem.value获取，不过这里只能获取到的是名字，并不是这个文件，因此我们要知道 一个属性。

files：表示该元素中获取到的文件的集合，注意是集合，如果想要获取单个文件内容，则填写下标则能获取到了。

不过以上这个属性，只有ie10以上才支持，因为ie低版本浏览器由于js安全问题，所以不允许js访问本地文件。
接下来我们如果就以这个上传的话，会发现上传的是一个字符串，如果想要上传对象类型，这时候需要FormData对象登场了。

var formdata = new FormData();
formdata.append('file',elem.files[0]);
xhr.send(formdata);

以上我们可以看到，创建了一个formdata对象，通过该对象下的append方法将这个数据变成了一个对象，当我们上传的时候可以看到，对象的内容会自动变成二进制数据传输，即表单提交方式传输一样。接下来我们介绍一下append这个方法。

append()：该方法给当前FormData对象添加一个键/值对，将内容全部以二进制的方式添加进去了，名字为file，第一个参数名字，第二个参数是内容。
接下来我们就可以利用ajax中的upload对象来进行制作进度条了。

var load = xhr.upload;
load.onprogress = function(ev){
    console.log('发送量:'+ev.loaded+'发送总量'+ev.total)
}

通过上传进度事件，利用时间函数获取发送量和总量，然后进行除法就可以得到进度条了。