文件下载加遮罩层

最近做项目,发现前端下载附件是个列表,可能存在用户多个大文件一起下载,内存挤爆服务器。故打算做文件下载时加遮罩层,让用户在下载时只能一个个下载。

下面介绍几种方法。(不过会出现一些问题)

1. 第一种是度娘出来的jQuery.fileDownload.js。此方法因一开始后端response的Header一直加不上cookie,拖了有点时间。后来加上了发现并不可用,这个只能监测文件是否能下载。

2.第二种我想到的是用websocket。对头,我想用它很久。一直想试试,终于尝试了下。说下思路,前端和后端链接成功后,在send 中发送sessionId,然后再发起下载请求,做一个遮罩层。后端监测文件流传输完,然后发给前端信息,前端去除遮罩层。完美。但是看似完美的背后,发现ie8不支持websocket。然后网上找到了兼容的方法,最后发现要 flash player10+。

3.苦苦思索,在朋友那抱怨ie8咋的咋的,突然我朋友说可以用axios。网上查了 axios 可以支持ie8。很开心的去尝试了。axios.onDownloadProgress方法可以监听总量,然后返回参数progressEvent.target.response,创建为一个url。放在a标签中,触发click 事件。这样虽然还是不知道什么时候下完文件,但是已经和后端没有关系了。只需要在axios的请求中加入遮罩层就行。但是这样有个问题就是,文件如果很大,用户会很奇怪为什么文件保存前会有遮罩层。(ps:最后没实现兼容ie8,项目没用webapack,兼容ie8网上一堆方法)

在下小白,用的是冷门框架。如有问题,请轻点喷。:)

你可能感兴趣的:(文件下载加遮罩层)