首页 > 其他分享 >js中实现文件上传下载的三种解决方案(推荐)

js中实现文件上传下载的三种解决方案(推荐)

时间:2023-05-22 14:55:49浏览次数:49  
标签:文件 请求 解决方案 上传下载 js 响应 源码 下载 客户端

 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        }

效果展示:

 

视频演示:

windows控件安装,,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS Express测试,asp.net-IIS测试,asp.net-阿里云(oss)测试,asp.net-华为云(obs)测试,jsp-springboot测试,ActiveX(x86)源码编译,ActiveX(x64)源码编译,Windows(npapi)源码编译,macOS源码编译,Linux(x86_64)源码编译,Linux(arm)源码编译,Linux(mips-uos)源码编译,Linux(mips-kylin-涉密环境)源码编译,sm4加密传输,压缩传输,

示例下载地址

源代码文档

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

详细配置信息及思路

标签:文件,请求,解决方案,上传下载,js,响应,源码,下载,客户端
From: https://www.cnblogs.com/songsu/p/17420608.html

相关文章

  • 前端中实现文件上传下载的三种解决方案(推荐)
    ​ 对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多线程并发上传能够达到最大效率。 本文是基于springboot+vue实现的文件上传,本文主要介绍服务端实现文件......
  • vue用qrcodejs2生成二维码,解决多个二维码追加的问题
    vue使用qrcodejs2生成二维码1、安装qrcodejs2npminstallqrcodejs2 2、代码//这个div用来展现二维码<divid="twoImageId"></div>//生成二维码的方法generateQRCode(classId,value){ newQRCode(document.querySelector(classId),{ text:value, width:......
  • 网页中实现文件上传下载的三种解决方案(推荐)
    ​ 前言文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上传到一半中断后,继续上传却只能重头开始上传,这种让人不爽的体验。那有没有......
  • 【iOS开发】UIWebView调用JS点击事件(stringByEvaluatingJavaScriptFromString)
    一、场景描述产品需求是移动端app要调用h5页面,然后监听h5代码中的某个方法,最终执行h5中的具体代码。二、具体代码.m文件@interfaceViewController()<UIWebViewDelegate>@property(nonatomic,strong)UIWebView*webView;@end@implementationViewController-(void)viewDid......
  • 揭秘神秘的JS混淆加密技术
    在编程的世界里,沉香舞动着一种强大的力量,就像母亲为了救子不惜一切的决心。而在JavaScript的领域中,我们也有一种神秘的技术,它能够将代码变得晦涩难懂,宛如沉香救母一般,守护着程序的安全。今天,我将带你揭开这个神秘的面纱,一窥JS混淆加密技术的奥秘。JavaScript混淆加密是一种将代码进......
  • 揭秘神秘的JS混淆加密技术
    在编程的世界里,沉香舞动着一种强大的力量,就像母亲为了救子不惜一切的决心。而在JavaScript的领域中,我们也有一种神秘的技术,它能够将代码变得晦涩难懂,宛如沉香救母一般,守护着程序的安全。今天,我将带你揭开这个神秘的面纱,一窥JS混淆加密技术的奥秘。JavaScript混淆加密是一种将代码进......
  • 一文读懂面试官都在问的Fastjson漏洞
    Fastjson1.2.24-RCE漏洞漏洞简介fastjson是阿里巴巴的开源JSON解析库,它可以解析JSON格式的字符串,支持将JavaBean序列化为JSON字符串,也可以从JSON字符串反序列化到JavaBean。即fastjson的主要功能就是将JavaBean序列化成JSON字符串,这样得到字符串之后就可以通过数据库等方式......
  • 【iOS开发】一些常见的警告解决方案(更新中。。。)
    UnknownpatterncolorfortheBackgroundColorattribute1.背景色属性为未知模式的颜色解决:默认xib里面控件的背景色为Default。如果出现警告,可能是你定义的颜色Xcode启动时识别不了,请重新检查每个控件的背景色,在设置一下颜色就可以了。Unusedvariable‘temString’2.变量没有......
  • sql server Json简单操作
    操作环境:SQLServerManagementStudio15.0.18424.0SQLServer管理对象(SMO) 16.100.47021.0+7eef34a564af48c5b0cf0d617a65fd77f06c3eb1MicrosoftAnalysisServices客户端工具 15.0.19750.0Microsoft数据访问组件(MDAC) 10.0.19041.2604MicrosoftMSXML ......
  • 企业网站如何做好JS代码的编写
    以下是一些企业网站如何做好JS代码的编写的建议:1. 简洁易懂:JS代码应该尽可能地简单明了,易于理解和维护,比如这个学习类网站,就是用了非常好的JS代码。2. 避免重复:避免编写重复的JS代码,可以使用函数来避免冗余代码。3. 逻辑清晰:编写JS代码时应该尽量保证逻辑的清晰性和可读性,方便......