当前端在开发过程中遇到上传文件需求，如果是上传头像、图片小文件之类的，可以正常按上传流程处理。但是当遇到上传大文件需求时，几个G或者十几个G，那么需要将这么大的文件分割成许多小片段分别上传，这种实现思路称为分片上传。

实现分片上传，精髓就是将文件分割成小片段，此时我们需要用到FormData对象和Bolb对象。

核心代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  </style>

</head>

<body>

  <input type="file" name="file" id="file">

  <button id="upload" onClick="upload()">上传</button>

  <script>

      //设置每个切片大小

      let bytesPerPiece = 1024*1024

      //上传文件函数

      function upload(){

          //获取上传文件

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

          let start = 0, end, index = 0, filesize = file.size, name = file.name;

          //计算切片总数

          let totalPieces = Math.ceil(filesize/bytesPerPiece);

          while(start < totalPieces){

              end = start + bytesPerPiece;

              if(end > filesize){

                  end = filesize

              }

              let chunk = file.slice(start, end);

              let formData = new FormData();

              formData.append('file', chunk, filename);

              //原生js发请求

              //   let xhr = new XMLHttpRequest();

              //   xhr.onreadystatechange = function(){

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

              //       }

              //   }

              //   xhr.open('post', '/api/upload', true);

              //   xhr.send(formData);

              // 使用jquery,需要将contentType，processData设置为false

            //   $.ajax({

            //       url: '/api/upload',

            //       type: 'post',

            //       data: formData,

            //       processData: false,

            //       contentType: false

            //   }).success(res=>{

            //   }).error(err=>{

            //   })

          }

      }

  </script>

</body>

</html>

附加： 断点续传

理解：断点续传，就是在我们上传过程中由于意外原因断网断电情况让上传终止了，那么上传的是不完整的，我们需要向服务器查询一下相同名字的文件大小，然后将上传位置设置成这个大小即可。

js实现大文件上传——分片上传方法的更多相关文章

  1. Node + js实现大文件分片上传基本原理及实践(一)

    _ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...

  2. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  3. MP4大文件虚拟HLS分片技术，避免服务器大量文件碎片

    MP4大文件虚拟HLS分片技术,避免点播服务器的文件碎片 本文主要介绍了通过虚拟分片技术,把MP4文件,映射为HLS协议中的一个个小的TS分片文件,实现了在不实际切分MP4文件的情况下,通过HLS协议 ...

  4. js实现大文件分片上传的方法

    借助js的Blob对象FormData对象可以实现大文件分片上传的功能,关于Blob和FormData的具体使用方法可以到如下地址去查看FormData 对象的使用Blob 对象的使用以下是实现代码, ...

  5. js实现大文件上传分片上传断点续传

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  6. js+php大文件分片上传

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  7. php实现大文件上传分片上传断点续传

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  8. 使用webuploader实现大文件上传分片上传

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  9. PHP + JS 实现大文件分割上传

    服务器上传文件会有一定的限制.避免内存消耗过大影响性能,在 php.ini 配置文件中,有几个影响参数: upload_max_filesize = 2M //PHP最大能接受的文件大小 post_m ...

  10. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

随机推荐

  1. vscode自定义工作目录

    vscode作为目前最受欢迎的编辑器,一直用vscode,但是最近清理c盘,发现vscode的目录,插件和数据目录,占据了上G的空间,那么,如何自定义 vscode的工作目录和数据目录呢,这里参考了一 ...

  2. "人生重开模拟器"，10分钟轻松搭建！

    人生重开模拟器是最近爆火的一款非常好玩的模拟游戏,会带你走入一个有趣的世界,开启全新的人生旅程,即"人生重开". 然而实际上,这款游戏短短在3天内上线,在百度贴吧.朋友圈.QQ群. ...

  3. 支持批量图片转文字的【OCR】文字识别工具，支持截图识别，速度快，准确度高，免费OCR，开源软件

    想必大家偶尔也有需要从图片中提取文字的需求,虽然现在手机上都自带了拍照识别功能,可是从电脑上的图片传到手机识别再将结果发回来实 在是有点麻烦,尤其当图片数量较多时,更是费时费力,使用网页版工具又要面临 ...

  4. 遍历dom节点

    function selectOnchang(obj) { var selectedValue = obj.selectedIndex if (selectedValue == 0) { obj.pa ...

  5. T137288 铸星

    有以下三种情况: 只有一个数,直接输出. 有正数也有复数,那就先让负数撞正数得到更小的负数,直到剩下最后一个正数撞所有的负数,答案是所有数的绝对值之和. 仅有正数或者仅有负数,就先找一对不相等的相邻的 ...

  6. ubuntu fastdds安装

    0,虚拟机安装: 推荐安装ubuntu 20.ubuntu 22与VMware不兼容,存在无法与主机之间复制粘贴文件的问题. 1.虚拟机镜像下载,下载tdesktop版本: 中科大站点:https:/ ...

  7. Neural Network模型复杂度之Residual Block - Python实现

    背景介绍 Neural Network之模型复杂度主要取决于优化参数个数与参数变化范围. 优化参数个数可手动调节, 参数变化范围可通过正则化技术加以限制. 本文从优化参数个数出发, 以Residual ...

  8. [转]md Typora旧版免费安装包(多平台版本)

    typora旧版免费安装包: 链接:https://pan.baidu.com/s/1pIqeO2nTJ9_s16IZj6z3sA?pwd=gut4 提取码:gut4 v1.0以上的版本都要收费了,我 ...

  9. 开启wamp依旧使用已下载的mysql

    1.打开D:\Environment\wamp64\bin\mysql\mysql8.0.31,修改my.ini 添加本机mysql密码,并且将3个port=3306改为port=3316 2.打开D ...

  10. pycharm 连接 docker容器

    1.ubuntu 18.04 先安装sudo apt-get install openssh-server 2.修改" /etc/ssh/sshd_config" 改成 Permi ...