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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
javascript 缓冲运动框架的实现
2017/09/29 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Pandas中resample方法详解
2019/07/02 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
浅析PEP572: 海象运算符
2019/10/15 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
生日礼品店创业计划书范文
2014/03/21 职场文书
代理协议书范本
2014/04/22 职场文书
教师教学评估方案
2014/05/09 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
学生打架检讨书
2014/10/20 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2014年接待工作总结
2014/11/26 职场文书
工作简历自我评价
2015/03/11 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android