一、input的multiple属性
input的file类型中新增了multiple属性，用于选择多个文件：
二、input的accept属性
accept属性用于限制选择文件的类型，例如accept=”image/*”则只能选择图片，其值为文件的MIME类型，可以由逗号分割多个值，如accept=”image/*,text/plain”。MIME类型可以参考http://www.w3school.com.cn/media/media_mimeref.asp。
注意：此处只是限制打开文件选择框时默认展现的文件类型，用户可以通过更改选择文件类型，选择其他类型的文件，所以应该对文件类型进行校验。
三、progress元素
progress元素为HTML5新增元素，用于显示进度条，默认样式如下：
你的浏览器不支持此标签
元素的max属性为进度条满时的值
给元素设置value属性，即可控制进度条的进度，如设置进度为50%(value=50，max=100)：
你的浏览器不支持此标签
四、拖拽事件
本例中使用的拖拽事件有以下几个：
1.ondragover：当文件出于元素上方时触发
2.ondragout：当文件脱离元素时触发
3.ondrop：当文件在元素上，并且鼠标释放时触发
五、通过Ajax上传文件
本例中，多个文件是通过多个请求上传的。这样上传的好处是，对于每一个文件来说，都可以根据上传结果来判断是否需要重传。
也可以通过一个请求同时上传多个文件，但如果上传过程中出错，那么重传的成本要更高，具体使用哪种方式可以根据自己的实际需要进行选择。
本例中，若服务器返回5xx状态码则认为上传失败，会重新上传失败的文件(如果失败3次则不再尝试重传)。
代码片段如下(截取核心代码，完整代码请进入Demo页面查看)：
function uploadFile(index){
var formData = new FormData();
formData.append('file', files[index]);
var xhr = new XMLHttpRequest();
xhr.open('POST', './backend.php', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === xhr.DONE){
if(xhr.status >= 200 && xhr.status < 300){
failCount = 0;
if(files[++index]){
uploadFile(index);
}
} else if(xhr.status >= 500 && xhr.status < 600){
failCount++;
if(failCount > 3){
failCount = 0;
if(files[++index]){
uploadFile(index);
}
}else{
setTimeout(function(){
uploadFile(index);
}, 1000);
}
}
}
};
xhr.send(formData);
}六、上传进度与上传速率查看
XMLHttpRequest对象的upload.onprogress事件可以提供上传进度相关的数据
它的参数中包含了已上传字节数loaded、总字节数total、时间戳timeStamp
通过上传字节数/总字节数可以得出上传进度的百分比
通过两次onprogress事件timeStamp之差可以得出两次的时间差(毫秒)，通过两次的loaded值可以得出该时间段内上传的字节数
多个文件上传时，可以算出一个文件占整体的百分比，当前上传的文件索引可以得出已经上传的文件个数，用已上传的文件个数乘上每个文件的占比，就可以得到当前文件上传起始时的整体百分比，加上当前文件上传的百分比*每个文件占用的百分比即可得出整体进度的百分比。
这样就可以大致的算出上传的速率：
var timeStamp = 0,
loaded = 0,
start = Date.now();
xhr.upload.onprogress = function(e){
var curProgress = (e.loaded * 100 / e.total).toFixed(2),
//index：当前文件索引，files：所有要上传的文件
totalProgress = index / files.length + curProgress / files.length * .01,
timeInterval = 0,
rate = 0;
if(timeStamp > 0){
timeInterval = e.timeStamp - timeStamp;
}else{
timeInterval = Date.now() - start;
}
rate = (e.loaded - loaded) / 1024 / timeInterval * 1000;
timeStamp = e.timeStamp;
loaded = e.loaded;
};
