当前端在开发过程中遇到上传文件需求，如果是上传头像、图片小文件之类的，可以正常按上传流程处理。但是当遇到上传大文件需求时，几个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. python实现发票二维码解析

    通过发票左上角的二维码信息,获取发票的关键信息,只需将图片格式的电子发票或扫描后的发票图片传入即可. 测试结果如下: 增值税电子普通发票:{'发票代码': '031xxxxxx311', '发票号码' ...

  2. 肖sir ___性能测试____多线程

    一.理论 (一) (1)多线程是Python程序中实现多任务的一种方式(2)线程是程序执行的最小单位． (3)同属一个进程的多个线程共享进程所拥有的全部资源. (二)进程和线程对比 (1)关系对比: ...

  3. 一次eureka的事故

    本地起了一个微服务(不知道怎么起的),导致注册到微服务上了,不知所措.. 想了下,杀死对应微服务的进程id就可以了(记不住啊!!)

  4. java之路总结

    2019-12-5 20:50:47 2019-10-7 18:01:37 总结学习java的各种知识! 越努力,越幸运! 永远不要高估自己! 吃的苦中苦,方为人上人! java基础 java进阶 j ...

  5. PageHelper大致逻辑

    简单涉及以下几个类: PageHelper   PageMethod  PageParam PageInterceptor  implement Interceptor PageHelperAutoC ...

  6. dcat-admin主题

    1.白色主题 admin设置: css /*对于在表单中使用grid列表时点击按钮时没有提示和报错,是因为 显示的html与当前弹框错位了,并隐藏在当前弹框下*/ .popover{ z-index: ...

  7. HCIP-进阶实验03-网络流量路径控制

    HCIP-进阶实验03-网络流量路径控制 实验需求 某城域网网络环境部署规划如图所示,该网络通过OSPF协议进行部署设计,分为四个区域,分别为骨干区域0.普通区域1.2.3.其中普通区域1为特殊区域N ...

  8. sql 字段分割函数 + 查询

    结果: 用于解决  这种 字段的查询 1.先创建分割函数 => 复制到数据库直接执行 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO /* by ...

  9. C#封装FluentValidation

    FluentValidation是一个非常强大的用于构建强类型验证规则的 .NET 框架,帮程序员解决了繁琐的校验问题,用起来非常爽,但我还是遇到了一件非常不爽的事情,如下代码所示: public c ...

  10. 网络协议及osi模型

    osi模型:由高到底 应用层:最高一层,是用户与网络的接口 表示层: 会话层: 传输层:作用是为上层协议提供端到端的可靠和透明的数据传输服务 网络层: 数据链路层: 物理层:它利用传输介质为数据链路层 ...