JS 可断点续传文件上传实现教程

刚开始学习前端开发就碰到文件上传问题，还要求可断点续传。查了很多资料，发现H5的file API刚好可以满足我们的需求，也遇到了一些问题，于是记录下来为有同样需求的朋友提供一些帮助。

一、首先，为了引入文件对象，需要在H5页面上放置一个file类型的输入标签。

<input type="file" onchange="fileInfo()">

当选择文件之后显示文件相关信息：

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

我们获取到的对象本身是一个数组，这里只选择了一个文件，需要选择多个文件可在input标签添加multiple属性。现在我们打开浏览器控制台可以看到输出了文件的最后修改时间、文件大小和文件名等信息：

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

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教程》

更多关于云服务器，域名注册，虚拟主机的问题，请访问西部数码官网：www.west.cn