jquery浏览器实现批量下载图片

àì夳堔傛蜴生んèń 2022-02-04 18:36 872阅读 0赞

公司有个需求，就是点击下载附件，批量下载用户上传的附件

开始想法1：

从文件服务器把这些文件下载下来，后台压缩成一个zip文件下载，后来发现有个问题，就是很多用户同时下载的话，会在后台同时生成很多个临时zip 下载完后还得 一一删除，这种方法肯定是臃肿的。（重复性工作），或者把用户的文件压缩一次，在上传到服务器，这样服务器文件也会重复。又或者把用户的附件压缩上传，不保留他的多个附件，只有一个zip文件存于服务器，这样用户就不能预览他的附件，想要预览的话 还得解压，删除他多个附件里面的任意一个或添加一个 ，还得解压后在删除他想要删除的附件，在进行压缩上传。

所以我直接在浏览器实现多个文件多次弹窗下载。

看了很多方法 最后找到了 jquery.fileDownload.js 这个js文件

官网地址

[https://www.bootcdn.cn/jquery.fileDownload/][https_www.bootcdn.cn_jquery.fileDownload]

我的使用为

在js中

//imgArr为图片地址的一个数组
        for (var i = 0; i < imgArr.length; i++) {
            if (imgArr[i] != "") {
                var url = "/permitted/downloadAll?url="+imgArr[i];
                $.fileDownload(url,{
                    httpMethod: 'GET',
    		        //同时上传表单数据
                    data:$("#file-down").serialize(),
                    prepareCallback:function(url){
                        console.log("下载开始，请稍等！");
                    },
                    successCallback:function(url){
                        console.log("下载成功！");
                    },
                    failCallback: function (html, url) {
                        var json = JSON.parse(html);
                        console.log(json);
                        if(json.status == 512){
                            console.log(json.errorMessage);
                        }
                    }
                });
            }
        }

在下载图片的控制器中添加如下代码

//jQuery以此判断下载是否成功。如果不添加上面的语句，则successCallback回调函数失效
            response.setHeader("Set-Cookie", "fileDownload=true; path=/");

下面为转载的其他使用方法

//生成一个txt的文件，讲字符串变量 str 的内容放在里面，并完成下载  
var str = "hello world可以中文吗？答案：可以的";  
download(str, "Text.txt", "text/plain");  
  
//也将生成一个txt文件，和上面的结果是一摸一样  
str = "data:text/plain,hello%20world";  
download(str, "dlDataUrlText.txt", "text/plain");  
  
//将数组或者json对象写入到文件中  
var debug = \{hello : "world"\};  
var blob = new Blob(\[JSON.stringify(debug, null, 2)\]);  
download(blob, "dlTextBlob.txt", "text/plain");

[https_www.bootcdn.cn_jquery.fileDownload]: https://www.bootcdn.cn/jquery.fileDownload/