一个简单的文件分割，断点续传

最新推荐文章于 2024-08-17 11:05:49 发布

原创最新推荐文章于 2024-08-17 11:05:49 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#断点续传

本文介绍了一种将大文件分割成小块进行上传的方法，通过JavaScript实现文件读取、分割及递归上传，适用于大文件上传场景，有效提高上传效率。

对一个单一文件进行分割

代码示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="file" type="file" name="file">
<input type="hidden" name="picurl" id="pic_url" value="" />
</body>
<script>
//js实现部分
var input = document.querySelector('input');
input.addEventListener('change', function() {
    File();
});
var File = function () {
    var temp = null;
    var formData = null;
    var xhr = null;
    var file = document.getElementById('file');
    var f = file.files[0];
    console.log(f.name);
    var totalSize = f.size;
    var btn = document.getElementById('t');
    // 每次截取的大小
    var num = totalSize/100;//分成100份
    var start = 0;
    var end = start + num;
    // 发送到的地址
    // 进度条
    var loaded = function (bili) {
        console.log(bili+'%');//控制台输出
    };
    sendFile = function () {
        console.log(start, totalSize)
        // 如果已经截取完了跳出这个函数。
        if (start >= totalSize){
            return;
        }
        // 截取文件
        temp = f.slice(start, end);
        formData = new FormData();
        formData.append(file.name, temp);
        formData.append('fileName', f.name);
        console.log(temp)//控制台输出
        // 改变下一次截取的位置
        start = end;
        end = start + num;
        // totalSize，判断最后一次截取是否大于totalSize如果大于就直接让end等于totalSize
        if (end > totalSize) {
          end = totalSize;
        }
        // 可以用这个做进度条
        loaded((start / totalSize) * 100);
        // 递归，如果文件没有截取完，继续截取
        sendFile();
    };
    // 调用一下
    sendFile()
};
</script>
</html>

使用时需要自己来配置下 request URL.