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

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

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

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

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

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

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

二、好了,当我们获取到选择的文件对象之后,现在需要把文件上传到服务器,可以模拟表单事件进行上传,需要引入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。于是我们打开浏览器上传文件:

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

<?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);
  }
});

最后美化完成的效果图如下:

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

时间: 2020-07-30

javascript之分片上传,断点续传的实际项目实现详解

总所周知,上传大文件时由于各种原因突然中断,然后整个文件需要从头开始上传,这种情况非常令人抓狂??,那么怎样才可以避免这种尴尬的情况呢?分片上传或许可以搞定这个痛点 原理:文件上传就是把文件切割成一个个小小的块,然后块逐一上传 后台约定接口: 1.getRestChunkInfo 获取当前文件的上传情况 输入:{fileName, fileSize, md5, token} 输出:{chunk_list, chunk_size, chunk_count} chunk_list是一个数组,未上传块

前端js实现文件的断点续传 后端PHP文件接收

早就听说过断点续传这种东西,前端也可以实现一下. 断点续传在前端的实现主要依赖着HTML5的新特性,所以一般来说在老旧浏览器上支持度是不高的 本文通过断点续传的简单例子(前端文件提交+后端PHP文件接收),理解其大致的实现过程 还是先以图片为例,看看最后的样子 一.一些知识准备 断点续传,既然有断,那就应该有文件分割的过程,一段一段的传. 以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割,我们可以可以使用slice方法来分割文件. 所以断点续传的最基本实现也就是:前端通

js断点调试心得分享(必看篇)

1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~ 2.断点怎么打才合适? 打断点操作很简单,核心的

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

还是先以图片为例,看看最后的样子 一.一些知识准备 断点续传,既然有断,那就应该有文件分割的过程,一段一段的传. 以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割,我们可以可以使用slice方法来分割文件. 所以断点续传的最基本实现也就是:前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接. 而我们需要对FileList对象进行修改再提交,在之前的文章中知晓了这种提交的一些注意点,因为F

使用Chrome调试JavaScript的断点设置和调试技巧

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各

js调试系列 断点与动态调试[基础篇]

上几篇文章已经为大家介绍了js调试系列的一些基础知识,这次乱码兄弟为大家带来了js断点与动态调试方法,需要的朋友可以参考下 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的. 其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. function votePost(n, t, i) { i || (i = !1); var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i

chrome浏览器如何断点调试异步加载的JS

前言 在我们日常开发中,常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢?下面来一起看看. 这是我们用Sources断点调试的实例图: 图中我们可以看到,在index.js中我们通过$.getScript引入test.js,看看表现如何: 我们在Network中看到test.js已经成功引入,但是它却属于XHR类请求,这样我们在Sources必然找不到它. 不出所料

Chrome调试折腾记之JS断点调试技巧

JS调试技巧技巧 一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三:查看断点内部的作用范围[很实用] 右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等.. 技巧4:监听事件断点 右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘

js断点调试经验分享

我们给大家详细分析了一下在JS调试的时候经常用到的断点调试,并把经验和技巧做了总结,以下是全部内容: 1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行

JavaScrip调试技巧之断点调试

首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js.除此之外,Firefox还支持一些更为高级的断点调试.变量监视功能. 其他浏览器里,Opera.Chrome和Safari的调试功能也比较好用.Opera的DragonFly速度相对比较快,界面清爽,功能强大,但不如Safari等友好.相比来说,IE8的程序员

详解使用Visual Studio Code对Node.js进行断点调试

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

使用Firebug对js进行断点调试的图文方法

具体步骤: a. 打开Firebug后,启用"脚本"调试,找到引用的脚本文件(或者行内js): b. 在适当的位置加入断点: c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断.如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断: d. 观察函数调用栈,观察local变量,也可以进行单步执行,进行调试. 确实非常简单!用Firebug断点调试的优点总结如下: 能加断点的行用绿色行号,非常直观: call stack用两种方式显示出来,很

React Native 真机断点调试+跨域资源加载出错问题的解决方法

写在前面 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题的同学应该不少,这里做下记录,有需要的可以参考下. 如何断点调试 首先,在真机上加载运行RN应用(过程略). 然后,摇动手机,弹出开发菜单,选择"Debug JS Remotely". chrome会自动打开调试界面,地址是 http://localhost:8081/debugger-u

javascript断点调试心得分享

1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~ 2.断点怎么打才合适? 打断点操作很简单,核心的

浅析Visual Studio Code断点调试Vue

很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体.个人还是更加习惯于断点调试.这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值. 设置 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS C