基于JavaScript实现前端文件的断点续传

还是先以图片为例，看看最后的样子

一、一些知识准备

断点续传，既然有断，那就应该有文件分割的过程，一段一段的传。

以前文件无法分割，但随着HTML5新特性的引入，类似普通字符串、数组的分割，我们可以可以使用slice方法来分割文件。

所以断点续传的最基本实现也就是：前端通过FileList对象获取到相应的文件，按照指定的分割方式将大文件分段，然后一段一段地传给后端，后端再按顺序一段段将文件进行拼接。

而我们需要对FileList对象进行修改再提交，在之前的文章中知晓了这种提交的一些注意点，因为FileList对象不能直接更改，所以不能直接通过表单的.submit()方法上传提交，需要结合FormData对象生成一个新的数据，通过Ajax进行上传操作。

二、实现过程

这个例子实现了文件断点续传的基本功能，不过手动的“暂停上传”操作还未实现成功，可以在上传过程中刷新页面来模拟上传的中断，体验“断点续传”、

有可能还有其他一些小bug，但基本逻辑大致如此。

1. 前端实现

首先选择文件，列出选中的文件列表信息，然后可以自定义的做上传操作

（1）所以先设置好页面DOM结构

rush:js;">

PHP" enctype="multipart/form-data"> 文件名

2. 后端实现

这里的后端实现还是比较简单的，主要用依赖了 file_put_contents、file_get_contents 这两个方法

要注意一下，通过FormData对象上传的文件对象，在PHP中也是通过$_FILES全局对象获取的，还有为了避免上传后文件中文的乱码，用一下iconv

断点续传支持文件的覆盖，所以如果已经存在完整的文件，就将其删除

rush:js;"> 　　　　// 如果第一次上传的时候，该文件已经存在，则删除文件重新上传 if ($isFirstUpload == '1' && file_exists('upload/'. $fileName) && filesize('upload/'. $fileName) == $totalSize) { unlink('upload/'. $fileName); }

使用上述的两个方法，进行文件信息的追加，别忘了加上 FILE_APPEND 这个参数~

rush:js;"> // 继续追加文件数据 if (!file_put_contents('upload/'. $fileName,file_get_contents($_FILES['theFile']['tmp_name']),FILE_APPEND)) { $status = 501; } else { // 在上传的最后片段时，检测文件是否完整（大小是否一致） if ($isLastChunk === '1') { if (filesize('upload/'. $fileName) == $totalSize) { $status = 200; } else { $status = 502; } } else { $status = 200; } }

一般在传完后都需要进行文件的校验吧，所以这里简单校验了文件大小是否一致

根据实际需求的不同有不同的错误处理方法，这里就先不多处理了

完整的PHP部分

rush:js;"> 0) { $status = 500; } else { // 此处为一般的文件上传操作 // if (!move_uploaded_file($_FILES['theFile']['tmp_name'],'upload/'. $_FILES['theFile']['name'])) { // $status = 501; // } else { // $status = 200; // } // 以下部分为文件断点续传操作 // 如果第一次上传的时候，该文件已经存在，则删除文件重新上传 if ($isFirstUpload == '1' && file_exists('upload/'. $fileName) && filesize('upload/'. $fileName) == $totalSize) { unlink('upload/'. $fileName); } // 否则继续追加文件数据 if (!file_put_contents('upload/'. $fileName,FILE_APPEND)) { $status = 501; } else { // 在上传的最后片段时，检测文件是否完整（大小是否一致） if ($isLastChunk === '1') { if (filesize('upload/'. $fileName) == $totalSize) { $status = 200; } else { $status = 502; } } else { $status = 200; } } } echo json_encode(array( 'status' => $status,'totalSize' => filesize('upload/'. $fileName),'isLastChunk' => $isLastChunk )); ?>

以上所述是小编给大家介绍的基于JavaScript实现前端文件的断点续传。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

js 文件断点续传