|
|
|
|
|
这里一并将CSS样式扔出来
{
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;
}
（2）接下来是JS的实现解析
通过FileList对象我们能获取到文件的一些信息
其中的size就是文件的大小，文件的分分割分片需要依赖这个
这里的size是字节数，所以在界面显示文件大小时，可以这样转化
1024
? file.size / 1024 > 1024
? file.size / (1024 * 10
24) > 1024
? (file.size / (1024 * 1024 * 10
24)).toFixed(2) + 'GB'
: (file.size / (1024 * 10
24)).toFixed(2) + 'MB'
: (file.size / 10
24).toFixed(2) + 'KB'
: (file.siz
E).toFixed(2) + 'B';
选择文件后显示文件的信息，在模版中替换一下数据
不过，在显示文件信息的时候，可能这个文件之前之前已经上传过了，为了断点续传，需要判断并在界面上做出提示
通过查询本地看是否有相应的数据（这里的做法是当本地记录的是已经上传100%时，就直接是重新上传而不是继续上传了）
);
if (percent && percent
!== '
100.0')
{
progress = '已上传 ' + percent + '%';
uploadVal = '继续上传';
}
显示了文件信息列表
点击开始上传，可以上传相应的文件
上传文件的时候需要就将文件进行分片分段
比如这里配置的每段1024B，总共chunks段（用来判断是否为末段），第chunk段，当前已上传的百分比percent等
需要提一下的是这个暂停上传的操作，其实我还没实现出来，暂停不了无奈ing...
接下来是分段过程
@R_297_1
0586@lSize ? @R_297_1
0586@lSize : (chunk + 1) * eachSize,// 分段结尾
percent = (100 * blobTo / @R_297_1
0586@lSiz
E).toFixed
(1),// 已上传的百分比
timeout = 5000,// 超时时间
fd = new FormData($('#myForm')
[0]);
fd.append('theFile',findTheFile(file
Name).slice(blobFrom,blobTo)
); // 分好段的文件
fd.append('fil
ename',file
Name); // 文件名
fd.append('@R_297_1
0586@lSize',@R_297_1
0586@lSiz
E); // 文件总大小
fd.append('isLastChunk',isLastChunk
); // 是否为末段
fd.append('isFir
stupload',times === 'first' ? 1 : 0
); // 是否是第一段（第一次上传）
// 上传之前查询是否以及上传过分片
chunk = window.localStorage.getItem(fil
ename + '_chunk') || 0;
chunk = parseInt(chunk,10
);
文件应该支持覆盖上传，所以如果文件以及上传完了，现在再上传，应该重置数据以支持覆盖（不然后端就直接追加blob数据了）
{
window.localStorage.setItem(fil
ename + '_chunk',0
);
chunk = 0;
isLastChunk = 0;
}
这个times其实就是个参数，因为要在上一分段传完之后再传下一分段，所以这里的做法是在回调中继续调用这个上传操作
接下来就是真正的文件上传操作了，用Ajax上传，因为用到了FormData对象，所以不要忘了在$.ajax({}加上这个配置processData: false
上传了一个分段，通过返回的结果判断是否上传完毕，是否继续上传
success: function(rs)
{
rs = JSON.parse(rs
);
// 上传成功
if (r
s.status === 200)
{
// 记录已经上传的百分比
window.localStorage.setItem(fil
ename + '_p',percent
);
// 已经上传完毕
if (chunk === (chunks - 1))
{
$progres
s.text(msg['done']
);
$thi
s.val('已经上传').prop('disabled',tru
E).css('
cursor','not-allowed'
);
if (!$('#upload-list').find('.upload-item-btn:not(:disabled)').length)
{
$('#upload-all-btn').val('已经上传').prop('disabled','not-allowed'
);
}
} else
{
// 记录已经上传的分片
window.localStorage.setItem(fil
ename + '_chunk',++chunk
);
$progres
s.text(msg['in'] + percent + '%'
);
// 这样设置可以暂停，但点击后动态的设置就暂停不了..
// if (chunk == 10)
{
// isPaused = 1;
// }
console.log(isPaused
);
if (!isPaused)
{
startUpload(
);
}
}
}
// 上传失败，上传失败分很多种情况，具体按实际来设置
else if (r
s.status === 500)
{
$progres
s.text(msg['failed']
);
}
},error: function()
{
$progres
s.text(msg['failed']
);
}
继续下一分段的上传时，就进行了递归操作，按顺序地上传下一分段
截个图..
这是完整的JS逻辑，代码有点儿注释了应该不难看懂吧哈哈
2. 后端实现
这里的后端实现还是比较简单的，主要用依赖了 file_put_contents、file_get_contents 这两个方法
要注意一下，通过FormData对象上传的文件对象，在php中也是通过$_FILES全局对象获取的，还有为了避免上传后文件中文的乱码，用一下iconv
断点续传支持文件的覆盖，所以如果已经存在完整的文件，就将其删除
stupload == '1' && file_exists('upload/'. $file
Name) && filesize('upload/'. $file
Name) == $@R_297_1
0586@lSiz
E) {
unlink('upload/'. $file
Name);
}
使用上述的两个方法，进行文件信息的追加，别忘了加上 FILE_APPEND 这个参数~
ename,file_get_contents($_FILES['theFile']['tmp_name']),FILE_APPEND))
{
$status = 501;
} else
{
// 在上传的最后片段时，检测文件是否完整（大小是否一致）
if ($isLastChunk === '1')
{
if (filesize('upload/'. $file
Name) == $@R_297_1
0586@lSiz
E) {
$status = 200;
} else
{
$status = 502;
}
} else
{
$status = 200;
}
}
一般在传完后都需要进行文件的校验吧，所以这里简单校验了文件大小是否一致
根据实际需求的不同有不同的错误处理方法，这里就先不多处理了
完整的php部分
0)
{
$status = 500;
} else
{
// 此处为
一般的文件上传操作
// if (!move_uploaded_file($_FILES['theFile']['tmp_name'],'upload/'. $_FILES['theFile']['name']))
{
// $status = 501;
// } else
{
// $status = 200;
// }
// 以下部分为文件断点续传操作
// 如果第一次上传的时候，该文件已经存在，则删除文件重新上传
if ($isFir
stupload == '1' && file_exists('upload/'. $file
Name) && filesize('upload/'. $file
Name) == $@R_297_1
0586@lSiz
E) {
unlink('upload/'. $file
Name);
}
// 否则继续追加文件数据
if (!file_put_contents('upload/'. $fil
ename,FILE_APPEND))
{
$status = 501;
} else
{
// 在上传的最后片段时，检测文件是否完整（大小是否一致）
if ($isLastChunk === '1')
{
if (filesize('upload/'. $file
Name) == $@R_297_1
0586@lSiz
E) {
$status = 200;
} else
{
$status = 502;
}
} else
{
$status = 200;
}
}
}
echo json_encode(array(
'status' => $status,'@R_297_1
0586@lSize' => filesize('upload/'. $file
Name),'isLastChunk' => $isLastChunk
)
);
?>
以上所述是小编给大家介绍的基于JavaScript实现前端文件的断点续传。菜鸟教程 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得菜鸟教程不错，可分享给好友！感谢支持。
大佬总结
以上是大佬教程为你收集整理的基于JavaScript实现前端文件的断点续传全部内容，希望文章能够帮你解决基于JavaScript实现前端文件的断点续传所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
