JS实现浏览器端大文件分片上传

2023-05-16

IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。

一. 两个必要响应头Accept-Ranges、ETag

        客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续传的下载:

Accept-Ranges:告知下载客户端这是一个可以恢复续传的下载,存放本次下载的开始字节位置、文件的字节大小;

ETag:保存文件的唯一标识(我在用的文件名+文件最后修改时间,以便续传请求时对文件进行验证);

Last-Modified:可选响应头,存放服务端文件的最后修改时间,用于验证

二. 一个重要请求头Range

Range:首次下载时,Range头为null,此时服务端的响应头中必须添加响应头Accept-Ranges、ETag;

              续传请求时,其值表示客户端已经收到的字节数,即本次下载的开始字节位置,服务端依据这个 值从相应位置读取数据发送到客户端。

三. 用于验证的请求头If-Range、

       当响应头中包含有Accept-Ranges、ETag时,续传请求时,将包含这些请求头:

If-Range:对应响应头ETag的值;

Unless-Modified-Since:对应响应头Last-Modified的值。

        续传请求时,为了保证客户端与服务端的文件的一致性和正确性,有必要对文件进行验证,验证需要自己写验证代码,就根据解析这两个请求头的值,将客户端已下载的部分与服务端的文件进行对比,如果不吻合,则从头开始下载,如果吻合,则断点续传。

四.  速度限制

        程序中加入了速度限制,用于对客户端进行权限控制的流量限制。

五. 其它注意事项

      如:文件名乱码的问题、文件名中空格变加号、强制客户端显示下载对话框等,详见源码注释:

  1

  2        /// <summary>

  3        /// 下载文件,支持大文件、续传、速度限制。支持续传的响应头Accept-Ranges、ETag,请求头Range 。

  4        /// Accept-Ranges:响应头,向客户端指明,此进程支持可恢复下载.实现后台智能传输服务(BITS),值为:bytes;

  5        /// ETag:响应头,用于对客户端的初始(200)响应,以及来自客户端的恢复请求,

  6        /// 必须为每个文件提供一个唯一的ETag值(可由文件名和文件最后被修改的日期组成),这使客户端软件能够验证它们已经下载的字节块是否仍然是最新的。

  7        /// Range:续传的起始位置,即已经下载到客户端的字节数,值如:bytes=1474560- 。

  8        /// 另外:UrlEncode编码后会把文件名中的空格转换中+(+转换为%2b),但是浏览器是不能理解加号为空格的,所以在浏览器下载得到的文件,空格就变成了加号;

  9        /// 解决办法:UrlEncode 之后, 将 "+" 替换成 "%20",因为浏览器将%20转换为空格

 10        /// </summary>

 11        /// <param name="httpContext">当前请求的HttpContext</param>

 12        /// <param name="filePath">下载文件的物理路径,含路径、文件名</param>

 13        /// <param name="speed">下载速度:每秒允许下载的字节数</param>

 14        /// <returns>true下载成功,false下载失败</returns>

 15        public static bool DownloadFile(HttpContext httpContext, string filePath, long speed)

 16        {

 17            bool ret = true;

 18            try

 19            {

 20                --验证:HttpMethod,请求的文件是否存在

 36

 37                定义局部变量

 49

 50                --验证:文件是否太大,是否是续传,且在上次被请求的日期之后是否被修改过--------------

 67

 68                try

 69                {

 70                    -------添加重要响应头、解析请求头、相关验证-------------------

 97

 98                    -------向客户端发送数据块-------------------

108                }

109                catch

110                {

111                    ret = false;

112                }

113                finally

114                {

115                    br.Close();

116                    myFile.Close();

117                }

118            }

119            catch

120            {

121                ret = false;

122            }

123            return ret;

124        }

上传展示截图:

控件源码下载:

asp.net源码下载,jsp-springboot源码下载,jsp-eclipse源码下载,jsp-myeclipse源码下载,php源码下载,csharp-winform源码下载,vue-cli源码下载,c++源码下载

详细配置信息及思路

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS实现浏览器端大文件分片上传 的相关文章

随机推荐

  • 麦克科马克

    这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题 xff0c 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中 居左 居右SmartyP
  • ROS-创建工作空间与功能包

    这里写目录标题 一 工作空间的组成与结构二 创建工作空间三 创建功能包四 设置环境变量五 功能包的package xml文件和CMakeLists txt文件 一 工作空间的组成与结构 工作空间的组成 xff1a src用于存放功能包源码
  • 「NeurIPS 2020」基于局部子图的图元学习

    点击蓝字 xff0c 设为星标 NeurIPS 2020 的接收论文 Graph Meta Learning via Local Subgraphs xff0c G META 是第一个使用局部子图来进行元学习的模型 Graph Meta L
  • Keras:Input()函数

    目录 1 Keras Input 函数 2 函数定义 xff1a 3 参数解释 4 例子 1 Keras Input 函数 作用 xff1a 初始化深度学习网络输入层的tensor 返回值 xff1a 一个tensor 2 函数定义 xff
  • JDBC入门笔记

    目录 1 xff0c JDBC概述 1 1 JDBC概念 2 xff0c JDBC快速入门 Java操作数据库的流程 2 1 编写代码步骤 3 JDBC API详解 3 1 DriverManager 3 2 Connection 3 2
  • 对抗样本入门详解

    文章目录 对抗样本基本原理对抗样本的发生对抗样本防御难在哪里对抗训练隐藏梯度defensive distillation 对抗样本的生成对抗样本生成方法介绍利用GAN生成对抗样本利用FGSM生成对抗样本代码复现 xff08 基于mnist
  • white/black-box attack(黑盒白盒攻击基础)

    基本概念 攻击方法分类标准 xff1a 假正性攻击 false positive 与伪负性攻击 false negative 假正性攻击 xff1a 原本是错误的但被被攻击模型识别为正例的攻击 eg 一张人类不可识别的图像 xff0c 被D
  • KL散度公式详解

    目录 文章目录 Jensen 39 s inequality讲解KL散度 xff08 又名relative entropy xff09 mutual information Jensen s inequality f x
  • 元学习算法MAML论文详解

    论文信息 题目 xff1a Model Agnostic Meta Learning for Fast Adaptation of Deep Networks 作者 xff1a Chelsea Finn 伯克利大学 xff0c Pieter
  • PINN内嵌物理知识神经网络入门及文献总结

    喜欢可点赞关注 xff0c 并收藏 xff0c 您的支持就是我的写作的动力 文章目录 一 PINN介绍二 物理信息驱动深度学习动手编程教程三 物理信息驱动深度学习方法几点讨论四 相关论文1 定义问题 建立工程架构2 网络结构选择3 不确定性
  • 极限学习机(Extreme Learning Machine,ELM)详解

    ELM ELM的提出目的是为了解决人工神经网络训练时耗费的时间和高成本 对此 xff0c 2004年由南洋理工大学的黄广斌提出了ELM学习理论 机器或者生物学习可以不需要调整隐层节点 xff1a 给定任何连续目标函数或者可分类目标 xff0
  • PINN深度学习求解微分方程系列一:求解框架

    下面我将介绍内嵌物理知识神经网络 xff08 PINN xff09 求解微分方程 首先介绍PINN基本方法 xff0c 并基于Pytorch框架实现求解一维Poisson方程 内嵌物理知识神经网络 xff08 PINN xff09 入门及相
  • PINN深度学习求解微分方程系列三:求解burger方程逆问题

    下面我将介绍内嵌物理知识神经网络 xff08 PINN xff09 求解微分方程 首先介绍PINN基本方法 xff0c 并基于Pytorch的PINN求解框架实现求解含时间项的一维burger方程逆问题 内嵌物理知识神经网络 xff08 P
  • 深度学习求解微分方程系列五:PINN求解Navier-Stokes方程正逆问题

    下面我将介绍内嵌物理知识神经网络 xff08 PINN xff09 求解微分方程 首先介绍PINN基本方法 xff0c 并基于Pytorch的PINN求解框架实现求解含时间项的二维Navier Stokes方程 内嵌物理知识神经网络 xff
  • Keras解读:使用Model()类构建网络模型的底层原理

    目录 一 前言 xff1a 二 topology py脚本简述 三 继承了Layer类的子类一般要实现 xff08 重写 xff09 以下methods xff1a 四 Node layer tensor在网络构建过程中的关系 建议结合源码
  • 【Paraview教程】第一章安装与基础介绍

    1 Paraview介绍 1 1基本介绍 ParaView是一个开源的 xff0c 跨平台的数据处理和可视化程序 ParaView用户可以迅速的建立起可视化环境利用定量或者是定性的手段去分析数据 利用它的批量处理能力可以在三维空间内在工具栏
  • 一种基于物理信息极限学习机的PDE求解方法

    作者 PINN山里娃 xff0c 作者主页 研究方向 物理信息驱动深度学习 不确定性 人工智能 偏微分方程 极限学习机 该作者聚焦深度学习模型与物理信息结合前沿研究 xff0c 提供了一系列AI for science研究进展报告及代码实现
  • js文件分片上传,断点续传

    前言 文件上传是一个老生常谈的话题了 xff0c 在文件相对比较小的情况下 xff0c 可以直接把文件转化为字节流上传到服务器 xff0c 但在文件比较大的情况下 xff0c 用普通的方式进行上传 xff0c 这可不是一个好的办法 xff0
  • JavaScript 大文件分片上传处理

    一 功能性需求与非功能性需求 要求操作便利 xff0c 一次选择多个文件和文件夹进行上传 xff1b 支持PC端全平台操作系统 xff0c Windows Linux Mac 支持文件和文件夹的批量下载 xff0c 断点续传 刷新页面后继续
  • JS实现浏览器端大文件分片上传

    IE的自带下载功能中没有断点续传功能 xff0c 要实现断点续传功能 xff0c 需要用到HTTP协议中鲜为人知的几个响应头和请求头 一 两个必要响应头Accept Ranges ETag 客户端每次提交下载请求时 xff0c 服务端都要添