ajax如何做断点续传,JS 可断点续传文件上传完成教程_WEB前端开发

刚入手下手进修前端开发就遇到文件上传问题，还要求可断点续传。查了许多材料，发明H5的file API恰好能够满足我们的需求，也遇到了一些问题，因而记录下来为有一样需求的朋侪供应一些协助。

一、起首，为了引入文件对象，须要在H5页面上安排一个file范例的输入标签。

当挑选文件今后显现文件相干信息：

function fileInfo() {

let fileObj = document.getElementById('file').files[0];

console.log(fileObj);

}

我们猎取到的对象自身是一个数组，这里只挑选了一个文件，须要挑选多个文件可在input标签增加multiple属性。如今我们翻开浏览器控制台能够看到输出了文件的末了修正时候、文件大小和文件名等信息：

二、好了，当我们猎取到挑选的文件对象今后，如今须要把文件上传到服务器，能够模仿表单事宜举行上传，须要引入FormData对象，其次，因为HTTP对文件上传大小的限定，所以要对文件切块上传，在服务器收到文件块今后拼接成一个团体，末了还须要一个进度条去显现上传进度。在理清了思绪今后这就着手完成：

先在H5页面安排一个进度条，同时将挑选文件转变的事宜更换为上传文件块的函数upload(入手下手上传字节处)，这里我们从第0个字节入手下手上传，也就是从头入手下手传：

然厥后完成文件块的上传函数：

// 文件切块大小为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) ? fileObj.size : (start + chunkSize);

// 将文件切块上传

let fd = new FormData();

fd.append('file', fileObj.slice(start, end));

// POST表单数据

let xhr = new XMLHttpRequest();

xhr.open('post', 'upload.php', true);

xhr.onload = function() {

if (this.readyState == 4 && this.status == 200) {

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

let progress = document.getElementById('progress');

progress.max = fileObj.size;

progress.value = end;

upload(end);

}

}

xhr.send(fd);

}

这里运用原生的JS向服务器发送要求，将文件切块运用函数slice(入手下手位置，完毕位置)，然后将文件块封装到FormData对象完成模仿表单的文件上传。背景我运用PHP吸收数据，也能够运用其他后端言语：

// 追加文件块

$fileName = $_FILES['file']['name'];

file_put_contents('files/' . $fileName, file_get_contents($_FILES['file']['tmp_name']), FILE_APPEND);

?>

在这里我新建了一个文件夹files，将上传的文件存放到这里。猎取的文件块内容采纳追加的情势FILE_APPEND。因而我们翻开浏览器上传文件：

然后检察一下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查询已上传文件大小：

// 吸收文件名

$fileName = file_get_contents('php://input');

$fileSize = 0;

$path = 'files/' . $fileName;

//查询已上传文件大小

if (file_exists($path)) {

$fileSize = filesize($path);

}

echo $fileSize;

?>

末了将H5页面上input标签的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 可断点续传文件上传完成教程的细致内容，更多请关注ki4网别的相干文章！

收藏 | 0