当前端在开发过程中遇到上传文件需求，如果是上传头像、图片小文件之类的，可以正常按上传流程处理。但是当遇到上传大文件需求时，几个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. winform 中 label透明化

    label1.BackColor = Color.Transparent;//设置背景颜色为透明 label1.Parent = pictureBox1;//将pictureBox1设为标签的父控件, ...

  2. CTreeCtrl的用法汇总（转）

    一 基础操作  1 插入节点 1)插入根节点 //插入根节点 HTREEITEM hRoot; CString str=L"ROOT" hRoot=nTreeCtrl.Insert ...

  3. AC和瘦AP组网

    ac和瘦ap组网 参考了这篇文章[Cisco Packet Tracer]WLC配置瘦AP指南_时间进行的小宇的博客-CSDN博客_思科瘦ap配置命令 服务器server-pt配置 先设置IP地址,随 ...

  4. SpringBoot-集成PageHelper及使用

    1.添加依赖 1 <dependency> 2 <groupId>com.github.pagehelper</groupId> 3 <artifactId& ...

  5. uniapp离线打包安卓未配置appkey或配置错误

    按照这4步检查都没问题 1.查看签名文件是否配置到了主APP的build.gradle. signingConfigs { config { keyAlias 'newPt' keyPassword ...

  6. c语言container_of 编译报错

    求指针ptr所在的结构体实例的首地址, #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER) #define co ...

  7. pr导出mp4格式提示无法播放解决方案

    pr导出mp4格式提示无法播放解决方案  1.这里的mp4格式就是导出的H.264格式 2. 这里选择导出,默认选项,导出视频有时候出现无法播放现象  3.另外,在视频右击的详细信息中没有任何数据   ...

  8. OnMicro BLE应用方案｜蓝牙语音遥控器-OM6621E

    随着物联网技术不断发展,家用电器往智能化方向持续迭代,使用红外遥控器这种传统的互动方式已经满足不了实际的使用需求,蓝牙语音遥控器作为人机交互新载体,逐渐取代传统红外遥控器成为家居设备的标配. 相比于传 ...

  9. class_task

    #!/usr/bin/python # -*- coding: UTF-8 -*- class Task():     _cls_name = "cls name"     def ...

  10. Ubuntu20.04安装PEA软件

    PEA软件可用于实时精密卫星钟差估计,精密卫星定轨,精密单点定位,电离层建模以及DCB估计等. Ginan开发人员推荐使用Ubuntu18.04或Ubuntu20.04搭建,本文使用Ubuntu20. ...