详细介绍HTML5Fileapi实现断点续传

目前市场上大多数的网站的断点上传都是需要安装浏览器插件的，本文就针对高级浏览器的环境下，通过HTML5 File api实现断点上传进行说明

一、实现文件多选

HTML5的<input>新增了"multiple"属性，该属性可接受多个值的文件上传字段

<input type="file" multiple="multiple" name="file" id="file"> 

添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了

二、实现文件从计算机拖拽到网页以及添加文件队列功能

这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能

其中 dragover 用来处理在指定的元素上移动时的事件，这里我们通过给body绑定dragover时间来处理页面中拖动文件的事件

document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy';
} 

用 drop 事件来处理鼠标松开时候的事件，此时应该将用户拖动过来的文件加入到上传队列中，以供后续的处理

document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 // dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
 // 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
 var files = evt.dataTransfer.files;
 // addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
 // 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
 addfile(files);
} 

参数start是开始切片的位置，end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块

如

file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ...... 

textpop-up 

var xhr = new XMLHttpRequest();
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理
xhr.open('POST', url, true);
xhr.onload = function (e){
 // 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快
}
xhr.upload.onprogress = function(e){
 // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度
 // e.loaded 该片文件上传了多少
 // e.totalSize 该片文件的总共大小
}
xhr.send(packet); 

以上就是详细介绍HTML5 File api实现断点续传的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于详细介绍HTML5Fileapi实现断点续传的详细内容...