html怎么实现拖拽进度条同步音乐,HTML5实现多文件上传(支持文件拖拽及上传进度与速度)...

一、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;

};