当前端在开发过程中遇到上传文件需求，如果是上传头像、图片小文件之类的，可以正常按上传流程处理。但是当遇到上传大文件需求时，几个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. 报错信息；Cannot execute request on any known server 解决；sprigcloud；跑本地但是服务一直在eureka

    配置文件加上: eureka.client.register-with-eureka=falseeureka.client.fetch-registry=false

  2. 均值、中值、高斯、non-local means算法详解

    文章仅为个人理解,如有不妥之处欢迎指正. 写几个常见的图像去噪滤波器. 1.均值滤波器 均值滤波器是最简单的图像平滑滤波器,其3*3的模板为 1 9 [ 1 1 1 1 1 1 1 1 1 ] \fr ...

  3. 利用Word文档的宏命令，仿信纸写文件报告

    一,首先写好稿件内容. 二,选择合适字体,然后设置信纸下划线格式. 三,启用宏命令.文件-选项-信任中心-信任中心设置-启用所有宏. 四,创建宏命令.视图-宏-创建一个宏 Sub 字体修改()'' 字 ...

  4. 070_GET https://login.salesforce.com/17181/logo180.png 404 (Not Found)

    这个问题怎么解答? Google了一下:https://success.salesforce.com/answers?id=90630000000D6qzAAC 谷歌应用商店安装了一个 Resourc ...

  5. Spring事务的四大特性

    1.事务(Transaction) 事务一般是指数据库事务, 是基于关系型数据库(RDBMS)的企业应用的重要组成部分.在软件开发领域,事务扮演者十分重要的角色,用来确保应用程序数据的完整性和一致性. ...

  6. Caused by: java.sql.SQLSyntaxErrorException: ORA-00933: SQL command not properly ended

    可能是多数据源使用分页pageHelper导致的: 解决方法:https://blog.csdn.net/qq_35378008/article/details/90024365 https://bl ...

  7. 阿里云centos7搭建docker，拉取镜像外网访问不通的问题排查

    最近新买了一个阿里云服务器,用docker安装了mysql,外网死活连接不上我的mysql,最终经过一顿猛百度查问题,找出问题根源.对这次查问题过程中出现的问题也有一些心得,也小小记录一下复盘总结. ...

  8. db2 linux创建用户后，登录报错

    db2的数据库服务器, 创建用户及授权参考 https://blog.csdn.net/qq_24805831/article/details/102590084 按照步骤创建用户后,连接数据库报错: ...

  9. 安装MinGW-C++开发环境2--软件安装

    下面以MinGW安装路径为C:\Local\MinGW64为例说明安装过程: 1.解压x86_64-8.1.0-release-posix-seh-rt_v6-rev0.7z到C:\Local\Min ...

  10. IEEE 802.66（ WiMax）的衰亡

    1.什么是WiMax WiMAX全称为,World Interoperability for Microwave Access,即全球微波接入互操作性,是一项基于IEEE 802.16标准的宽带无线接 ...