JS可断点续传文件上传实现代码解析


Posted in Javascript onJuly 30, 2020

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

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

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

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

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

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

JS可断点续传文件上传实现代码解析

二、好了,当我们获取到选择的文件对象之后,现在需要把文件上传到服务器,可以模拟表单事件进行上传,需要引入FormData对象,其次,由于HTTP对文件上传大小的限制,所以要对文件切块上传,在服务器收到文件块之后拼接成一个整体,最后还需要一个进度条去显示上传进度。在理清了思路以后这就动手实现:

先在H5页面放置一个进度条,同时将选择文件改变的事件更换为上传文件块的函数upload(开始上传字节处),这里我们从第0个字节开始上传,也就是从头开始传:

 <input type="file" id="file" onchange="upload(0)">
 <progress id="progress" max="100" value="0"></progress>

然后来实现文件块的上传函数:

// 文件切块大小为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接收数据,也可以使用其他后端语言:

<?php
  // 追加文件块
  $fileName = $_FILES['file']['name'];
  file_put_contents('files/' . $fileName, file_get_contents($_FILES['file']['tmp_name']), FILE_APPEND);
?>

在这里我新建了一个文件夹files,将上传的文件存放到这里。获取的文件块内容采用追加的形式FILE_APPEND。于是我们打开浏览器上传文件:

JS可断点续传文件上传实现代码解析

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

JS可断点续传文件上传实现代码解析

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

先定义一个初始化函数当选择文件后向服务器查询已上传文件大小:

// 初始化上传大小
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查询已上传文件大小:

<?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():

<input type="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可断点续传文件上传实现代码解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
Vue单文件组件开发实现过程详解
Jul 30 #Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 #Javascript
在vue中实现嵌套页面(iframe)
Jul 30 #Javascript
Vue文本模糊匹配功能如何实现
Jul 30 #Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 #Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 #Javascript
Vue Render函数原理及代码实例解析
Jul 30 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
图片之间的切换
2006/06/26 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python变量和字符串详解
2017/04/29 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
银行职员思想汇报
2013/12/31 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
四年级学生评语大全
2014/04/21 职场文书
管理人员岗位职责
2015/02/14 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android