什么是断点续传？前端如何实现⽂件的断点续传
什么是断点续传？
就是下载⽂件时，不必重头开始下载，⽽是从指定的位置继续下载，这样的功能就叫做断点续传。断点续传的理解可以分为两部分：⼀部分是断点，⼀部分是续传。断点的由来是在下载过程中，将⼀个下载⽂件分成了多个部分，同时进⾏多个部分⼀起的下载，当某个时间点，任务被暂停了，此时下载暂停的位置就是断点了。续传就是当⼀个未完成的下载任务再次开始时，会从上次的断点继续传送。
以前⽂件⽆法分割，但随着html5新特性的引⼊，类似普通字符串、数组的分割，我们可以可以使⽤slice⽅法来分割⽂件。所以断点续传的最基本实现也就是：前端通过FileList对象获取到相应的⽂件，按照指定的分割⽅式将⼤⽂件分段，然后⼀段⼀段地传给后端，后端再按顺序⼀段段将⽂件进⾏拼接。
⽽我们需要对FileList对象进⾏修改再提交，在之前的⽂章中知晓了这种提交的⼀些注意点，因为FileList对象不能直接更改，所以不能直接通过表单的.submit()⽅法上传提交，需要结合FormData对象⽣成⼀个新的数据，通过Ajax进⾏上传操作。
实现过程
这个例⼦实现了⽂件断点续传的基本功能，不过⼿动的“暂停上传”操作还未实现成功，可以在上传过程
中刷新页⾯来模拟上传的中断，体
验“断点续传”、
有可能还有其他⼀些⼩bug，但基本逻辑⼤致如此。
1. 前端实现
⾸先选择⽂件，列出选中的⽂件列表信息，然后可以⾃定义的做上传操作
1、所以先设置好页⾯DOM结构
<!-- 上传的表单 -->
<form method="post" id="myForm" action="/fileTest.php" enctype="multipart/form-data">
<input type="file" id="myFile" multiple>
<!-- 上传的⽂件列表 -->
<table id="upload-list">
<thead>
<tr>
<th width="35%">⽂件名</th>
<th width="15%">⽂件类型</th>
<th width="15%">⽂件⼤⼩</th>
<th width="20%">上传进度</th>
<th width="15%">
<input type="button" id="upload-all-btn" value="全部上传">
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<!-- 上传⽂件列表中每个⽂件的信息模版 -->
<script type="text/template" id="file-upload-tpl">
<tr>
<td>{{fileName}}</td>
<td>{{fileType}}</td>
<td>{{fileSize}}</td>
<td class="upload-progress">{{progress}}</td>
<td>
<input type="button" class="upload-item-btn"  data-name="{{fileName}}" data-size="{{totalSize}}" data-state="default" value="{{uploadVal}}">
</td>
</tr>
</script>
这⾥⼀并将css样式扔出来
<style type="text/css">
body {
font-family: Arial;
}
form {
margin: 50px auto;
width: 600px;
}
input[type="button"] {
cursor: pointer;
}
table {
display: none;
margin-top: 15px;
border: 1px solid #ddd;
border-collapse: collapse;
}
table th {
color: #666;
}
table td,table th {
padding: 5px;
border: 1px solid #ddd;
text-align: center;
font-size: 14px;
}
</style>
2.接下来是js的实现解析
通过FileList对象我们能获取到⽂件的⼀些信息
其中的size就是⽂件的⼤⼩，⽂件的分分割分⽚需要依赖这个，这⾥的size是字节数，所以在界⾯显⽰⽂件⼤⼩时，可以这样转化
// 计算⽂件⼤⼩
size = file.size > 1024
file.size / 1024  > 1024
file.size / (1024 * 1024) > 1024
(file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
: (file.size / (1024 * 1024)).toFixed(2) + 'MB'
: (file.size / 1024).toFixed(2) + 'KB'
: (file.size).toFixed(2) + 'B';
选择⽂件后显⽰⽂件的信息，在模版中替换⼀下数据
// 更新⽂件信息列表
uploadItem.push(uploadItemTpl
.replace(/{{fileName}}/g, file.name)
.replace('{{fileType}}', pe || file.name.match(/\.\w+$/) + '⽂件')
.replace('{{fileSize}}', size)
.replace('{{progress}}', progress)
.
replace('{{totalSize}}', file.size)
.replace('{{uploadVal}}', uploadVal)
);
不过，在显⽰⽂件信息的时候，可能这个⽂件之前之前已经上传过了，为了断点续传，需要判断并在界⾯上做出提⽰。通过查询本地看是否有相应的数据（这⾥的做法是当本地记录的是已经上传100%时，就直接是重新上传⽽不是继续上传了）
// 初始通过本地记录，判断该⽂件是否曾经上传过
percent = Item(file.name + '_p');        if (percent && percent !== '100.0') {
progress = '已上传 ' + percent + '%';
uploadVal = '继续上传';
}
显⽰了⽂件信息列表
点击开始上传，可以上传相应的⽂件
上传⽂件的时候需要就将⽂件进⾏分⽚分段
⽐如这⾥配置的每段1024B，总共chunks段(⽤来判断是否为末段)，第chunk段，当前已上传的百分⽐percent等需要提⼀下的是这个暂停上传的操作，其实我还没实现出来，暂停不了⽆奈ing…
接下来是分段过程
// 设置分⽚的开始结尾
var blobFrom = chunk * eachSize, // 分段开始
blobTo = (chunk + 1) * eachSize > totalSize ? totalSize : (chunk + 1) * eachSize, // 分段结尾
percent = (100 * blobTo / totalSize).toFixed(1), // 已上传的百分⽐
timeout = 5000, // 超时时间
fd = new FormData($('#myForm')[0]);
fd.append('theFile', findTheFile(fileName).slice(blobFrom, blobTo)); // 分好段的⽂件
fd.append('fileName', fileName); // ⽂件名
fd.append('totalSize', totalSize); // ⽂件总⼤⼩
fd.append('isLastChunk', isLastChunk); // 是否为末段
fd.append('isFirstUpload', times === 'first' ? 1 : 0); // 是否是第⼀段（第⼀次上传）
// 上传之前查询是否以及上传过分⽚
chunk = Item(fileName + '_chunk') || 0;
chunk = parseInt(chunk, 10);
⽂件应该⽀持覆盖上传，所以如果⽂件以及上传完了，现在再上传，应该重置数据以⽀持覆盖(不然后端就直接追加blob数据了
// 如果第⼀次上传就为末分⽚，即⽂件已经上传完成，则重新覆盖上传
if (times === 'first' && isLastChunk === 1) {
window.localStorage.setItem(fileName + '_chunk', 0);
chunk = 0;
isLastChunk = 0;
}
这个times其实就是个参数，因为要在上⼀分段传完之后再传下⼀分段，所以这⾥的做法是在回调中继续调⽤这个上传操作
接下来就是真正的⽂件上传操作了，⽤Ajax上传，因为⽤到了FormData对象，所以不要忘了在$.ajax({}加上这个配置processData: false 上传了⼀个分段，通过返回的结果判断是否上传完毕，是否继续上传
success: function (rs) {
rs = jsON.parse(rs);
// 上传成功
if (rs.status === 200) {
// 记录已经上传的百分⽐
window.localStorage.setItem(fileName + '_p', percent);
// 已经上传完毕
if (chunk === (chunks - 1)) {
$(msg['done']);
$this.val('已经上传').prop('disabled', true).css('cursor', 'not-allowed');
if (!$('#upload-list').find('.upload-item-btn:not(:disabled)').length) {
$('#upload-all-btn').val('已经上传').prop('disabled', true).css('cursor', 'not-allowed');
}
} else {
// 记录已经上传的分⽚
window.localStorage.setItem(fileName + '_chunk', ++chunk);
$(msg['in'] + percent + '%');
/
/ 这样设置可以暂停，但点击后动态的设置就暂停不了..
// if (chunk == 10) {
//    isPaused = 1;
// }
console.log(isPaused);
if (!isPaused) {
startUpload();
}
}
}
// 上传失败，上传失败分很多种情况，具体按实际来设置
else if (rs.status === 500) {
$(msg['failed']);
}
},
error: function () {
$(msg['failed']);
}
继续下⼀分段的上传时，就进⾏了递归操作，按顺序地上传下⼀分段
截个图..
这是完整的js逻辑，代码有点⼉注释了应该不难看懂吧哈哈
// 全部上传操作
$(document).on('click', '#upload-all-btn', function () {
// 未选择⽂件
if (!$('#myFile').val()) {
$('#myFile').focus();
margin属性值可以为百分比
}
// 模拟点击其他可上传的⽂件
else {
$('#upload-list .upload-item-btn').each(function () {
$(this).click();
});
}
});
// 选择⽂件-显⽰⽂件信息
$('#myFile').change(function (e) {
var file,
uploadItem = [],
uploadItemTpl = $('#file-upload-tpl').html(),
size,
percent,
progress = '未上传',
uploadVal = '开始上传';
for (var i = 0, j = this.files.length; i < j; ++i) {
file = this.files[i];
percent = undefined;
progress = '未上传';
uploadVal = '开始上传';
// 计算⽂件⼤⼩
size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size /            (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size / (1024 * 1024)).toFixed(2) + 'MB' : (file            .size / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';
// 初始通过本地记录，判断该⽂件是否曾经上传过
percent = Item(file.name + '_p');
if (percent && percent !== '100.0') {
progress = '已上传 ' + percent + '%';
uploadVal = '继续上传';
}
// 更新⽂件信息列表
uploadItem.push(uploadItemTpl
.replace(/{{fileName}}/g, file.name)
.replace('{{fileType}}', pe || file.name.match(/\.\w+$/) + '⽂件')
.replace('{{fileSize}}', size)
.replace('{{progress}}', progress)
.replace('{{totalSize}}', file.size)
.replace('{{uploadVal}}', uploadVal));

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。