function fileInfo() {
   let fileObj = document.getElementById('file').files[0];
   console.log(fileObj);
 }

// 文件切块大小为1MB
const chunkSize = 1024 * 1024;

// 从start字节处开始上传
function upload(start) {
  let fileObj = document.getElementById('file').files[0];
  // 上传完成
  if (start >= fileObj.size) {
    return;
  }
  // 获取文件块的终止字节
  let end = (start + chunkSize > fileObj.size) "htmlcode">

<"text-align: center">

然后查看一下files文件夹下面是否接收到vscode.exe文件：

三、有了文件上传功能，接下来我们要实现断点续传功能。在上一步文件切块的基础上，断点续传变得非常简单，如果突然断网或者浏览器意外关闭，那么上传的是不完整的文件，我们只需要在选择了文件以后向服务器查询一下服务器上相同文件名的大小，然后将开始上传位置(字节)设置到这个大小即可：
先定义一个初始化函数当选择文件后向服务器查询已上传文件大小：


// 初始化上传大小
function init() {
  let fileObj = document.getElementById('file').files[0];
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 将字符串转化为整数
      let start = parseInt(this.responseText);
      // 设置进度条
      let progress = document.getElementById('progress');
      progress.max = fileObj.size;
      progress.value = start;
      // 开始上传
      upload(start);
    }
  }
  xhr.open('post', 'fileSize.php', true);
  // 向服务器发送文件名查询大小
  xhr.send(fileObj.name);
}


在服务器端使用fileSize.php查询已上传文件大小：


<"file" onchange="init()">

同时upload函数也不需要重复设置进度条的最大值，修改为：

 // 上传一块完成后修改进度条信息，然后上传下一块


 document.getElementById('progress').value = end;


 upload(end);

然后打开浏览器，在上传过程中故意关闭浏览器下次再选择同一文件时即可从断点位置开始续传。
四、虽然已经实现了可断点续传的文件上传功能，但是界面还需要美化一下，这里引用bootstrap框架，需要jquery，顺便用jquery的ajax代替原生JS的ajax，需要注意的是$.ajax的processData和contentType属性都要设置成false：


// POST表单数据
$.ajax({
  url: 'upload.php',
  type: 'post',
  data: fd,
  processData: false,
  contentType: false,
  success: function() {
    upload(end);
  }
});


最后美化完成的效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                

                                    JS,断点续传,文件上传 
                                

                                    标签：
                                        
JS,断点续传,文件上传
                                     

                                
金狮镖局 Design By www.egabc.com