关键词：
刚开始学习前端开发就碰到文件上传问题，还要求可断点续传。查了很多资料，发现H5的file API刚好可以满足我们的需求，也遇到了一些问题，于是记录下来为有同样需求的朋友提供一些帮助。
一、首先，为了引入文件对象，我们需要在H5页面上放置一个file类型的输入标签。
1 <input type="file" id="file" onchange="fileInfo()">
当我们选择文件之后显示文件相关信息：
1 function fileInfo() 2 let fileObj = document.getElementById(‘file‘).files[0]; 3 console.log(fileObj); 4
我们获取到的对象本身是一个数组，这里我们只选择了一个文件，需要选择多个文件可在input标签添加multiple属性。现在我们打开浏览器控制台可以看到输出了文件的最后修改时间、文件大小和文件名等信息：
二、好了，当我们获取到选择的文件对象之后，现在需要把文件上传到服务器，可以模拟表单事件进行上传，需要引入FormData对象，其次，由于HTTP对文件上传大小的限制，所以要对文件切块上传，在服务器收到文件块之后拼接成一个整体，最后还需要一个进度条去显示上传进度。在理清了思路以后我们这就动手实现：
先在H5页面放置一个进度条，同时将选择文件改变的事件更换为上传文件块的函数upload(开始上传字节处)，这里我们从第0个字节开始上传，也就是从头开始传：
1 <input type="file" id="file" onchange="upload(0)"> 2 <progress id="progress" max="100" value="0"></progress>
然后我们来实现文件块的上传函数：
1 // 文件切块大小为1MB 2 const chunkSize = 1024 * 1024; 3 4 // 从start字节处开始上传 5 function upload(start) 6 let fileObj = document.getElementById(‘file‘).files[0]; 7 // 上传完成 8 if (start >= fileObj.size) 9 return; 10 11 // 获取文件块的终止字节 12 let end = (start + chunkSize > fileObj.size) ? fileObj.size : (start + chunkSize); 13 // 将文件切块上传 14 let fd = new FormData(); 15 fd.append(‘file‘, fileObj.slice(start, end)); 16 // POST表单数据 17 let xhr = new XMLHttpRequest(); 18 xhr.open(‘post‘, ‘upload.php‘, true); 19 xhr.onload = function() 20 if (this.readyState == 4 && this.status == 200) 21 // 上传一块完成后修改进度条信息，然后上传下一块 22 let progress = document.getElementById(‘progress‘); 23 progress.max = fileObj.size; 24 progress.value = end; 25 upload(end); 26 27 28 xhr.send(fd); 29
这里我们使用原生的JS向服务器发送请求，将文件切块使用函数slice(开始位置，结束位置)，然后将文件块封装到FormData对象实现模拟表单的文件上传。后台我使用PHP接收数据，也可以使用其他后端语言：
1 <?php 2 // 追加文件块 3 $fileName = $_FILES[‘file‘][‘name‘]; 4 file_put_contents(‘files/‘ . $fileName, file_get_contents($_FILES[‘file‘][‘tmp_name‘]), FILE_APPEND); 5 ?>
在这里我新建了一个文件夹files，将上传的文件存放到这里。获取的文件块内容采用追加的形式FILE_APPEND。于是我们打开浏览器上传文件：
然后查看一下files文件夹下面是否接收到vscode.exe文件：
三、有了文件上传功能，接下来我们要实现断点续传功能。在上一步文件切块的基础上，断点续传变得非常简单，如果突然断网或者浏览器意外关闭，那么上传的是不完整的文件，我们只需要在选择了文件以后向服务器查询一下服务器上相同文件名的大小，然后将开始上传位置(字节)设置到这个大小即可：
先定义一个初始化函数当选择文件后向服务器查询已上传文件大小：
1 // 初始化上传大小 2 function init() 3 let fileObj = document.getElementById(‘file‘).files[0]; 4 let xhr = new XMLHttpRequest(); 5 xhr.onreadystatechange = function() 6 if (this.readyState == 4 && this.status == 200) 7 // 将字符串转化为整数 8 let start = parseInt(this.responseText); 9 // 设置进度条 10 let progress = document.getElementById(‘progress‘); 11 progress.max = fileObj.size; 12 progress.value = start; 13 // 开始上传 14 upload(start); 15 16 17 xhr.open(‘post‘, ‘fileSize.php‘, true); 18 // 向服务器发送文件名查询大小 19 xhr.send(fileObj.name); 20
在服务器端使用fileSize.php查询已上传文件大小：
1 <?php 2 // 接收文件名 3 $fileName = file_get_contents(‘php://input‘); 4 $fileSize = 0; 5 $path = ‘files/‘ . $fileName; 6 //查询已上传文件大小 7 if (file_exists($path)) 8 $fileSize = filesize($path); 9 10 echo $fileSize; 11 ?>
最后将H5页面上input标签的onchange事件改为init()：
1 <input type="file" id="file" onchange="init()">
同时upload函数也不需要重复设置进度条的最大值，修改为：
1 // 上传一块完成后修改进度条信息，然后上传下一块 2 document.getElementById(‘progress‘).value = end; 3 upload(end);
然后我们打开浏览器，在上传过程中关闭浏览器下次再选择同一文件即可从断点位置开始续传。
四、虽然已经实现了可断点续传的文件上传功能，但是界面还需要美化一下，这里引用bootstrap框架，需要jquery，顺便用jquery的ajax代替原生JS的ajax，需要注意的是$.ajax的processData和contentType属性都要设置成false：
1 / POST表单数据 2 $.ajax( 3 url: ‘upload.php‘, 4 type: ‘post‘, 5 data: fd, 6 processData: false, 7 contentType: false, 8 success: function() 9 upload(end); 10 11 );
最后美化完成的效果图如下：
源码下载：https://files.cnblogs.com/files/viewts/upload.zip
局域网超大文件上传和断点续传的实现
...码逻辑大部分是相同的，目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库，可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08 查看详情
局域网超大文件上传和断点续传的实现
...码逻辑大部分是相同的，目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库，可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08 查看详情
基于http的文件断点续传实现(代码片段)
基于Http的文件断点续传实现1:断点续传的介绍客户端软件断点续传指的是在下载或上传时，将下载或上传任务（一个文件或一个压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如... 查看详情
⭐python实现多线程并发下载大文件（制作支持断点续传的下载器的绝佳参考⁉️）⭐(代码片段)
不知道各位童鞋们是否遇到过需要使用python下载大文件的需求，或者需要从一些网速很慢的网站上下载文件。如果你在实际下载过程碰到下载不稳定经常失败的情况，本文的方法将会给你带来一些解决思路和方案。本文... 查看详情
面试官：请你实现一个大文件上传和断点续传(代码片段)
...答对结束后花了一段时间整理了下思路，那么究竟该如何实现一个大文件上传，以及在上传中如何实现断点续传的功能呢？本文将从零搭建前端和服务端，实现一个大文件上传和断点续 查看详情
springboot实现分片上传断点续传大文件极速秒传-备忘(代码片段)
... 断点续传可以看成是分片上传的一个衍生，因此可以使用分片上传的场景，都可以使用断点续传。2.3实现断点续传的核心逻辑 在分片上传的过程中，如果因为系统崩溃或者网络中断等异常因素导致上传中断，这时候客户... 查看详情
超大文件上传和断点续传的源代码
总结一下大文件分片上传和断点续传的问题。因为文件过大（比如1G以上），必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能，当传输的文件比较大时，http协议自动会将文件切片（分块）... 查看详情
超大文件上传和断点续传的组件
...ntent-Range实体头。HTTP协议本身不支持断点上传，需要自己实现。 二、Range 用于请求头中，指定第一个字节的位置和最后一个字节的位置，一般格式： 查看详情
超大文件上传和断点续传的实现
...了。 这里要说的是断点续传都有哪些技术要点。使用传统的表单提交文件或是HTML5的FormData都是将文件“整块”提交，服务端取到该文件后再进行转移、重命名等操作，因此，无法实时保存文件的已上传部分。而且... 查看详情
基于js管理大文件上传以及断点续传(代码片段)
...过程中文件上传是经常遇到的一个问题，也许你能够实现相关的功能，但是做完后回想代码实现上是不是有点"力不从心"呢？你真的了解文件上传吗？如何做到大文件上传以及断电续传呢，前后端通讯常... 查看详情
字节跳动面试官：请你实现一个大文件上传和断点续传(代码片段)
...结束后花了一段时间整理了下思路，那么究竟该如何实现一个大文件上传，以及在上传中如何实现断点续传的功能呢？本文将从零搭建前端和服务端，实现一个大文件上传和断点续传前端：Vue@2+Element-ui... 查看详情
winform实现断点续传的思路及代码
开篇的絮絮叨叨：如果是web，可以考虑使用 使用WebUploader: http://fex.baidu.com/webuploader/getting-started.html工作中需要使用到断点续传，找了好多篇博客，最后的时候在csdn上找到一个项目（文末有链接）。把他的代码拆出来使用... 查看详情
webuploader与django进行断点续传，大文件上传(代码片段)
需要实现的效果如下需要使用的 jsjquery.jswebuploader.hshashmap.js路由fromdjango.urlsimportpathfrom.importviewsurlpatterns=[path('index/',views.index),path('checkChunk/',views.checkChunk,name=&# 查看详情
断点续传的实现(代码片段)
文章目录从上次断开位置继续下载实现原理（客户端）：HTTP实现（流程）：图1：客户端Range头部信息图2：服务端Content-Range信息客户端与服务端的请求与响应图解：获取文件ETag的函数：下载... 查看详情
超大文件上传和断点续传的源代码
总结一下大文件分片上传和断点续传的问题。因为文件过大（比如1G以上），必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能，当传输的文件比较大时，http协议自动会将文件切片（分块）... 查看详情
断点续传实现
断点续传实现:简单来说应该分为两个角度来看待:1、将要续传的文件2、续传的文件一、将要续传的文件先说说将要续传的文件，既然是续传，那么肯定要有个标识，举例说明一下: 事先准备一个文件，大小是1852... 查看详情
4gb以上，超大文件上传，http断点续传，如何实现？(代码片段)
...上传，并且要求支持http断点续传。笔者在以前介绍了实现大文件上传的一些基本概念，其实非常简单，这里在简要归纳一下，方便记忆！服务器端由C语言实现，而不是用java、PHP这种解释型语 查看详情
超大文件上传和断点续传的组件
...ntent-Range实体头。HTTP协议本身不支持断点上传，需要自己实现。 二、Range 用于请求头中，指定第一个字节的位置和最后一个字节的位置，一般格式： Range:用于客户端到服务端的请求，可以通过改字段指... 查看详情