前端如何实现:批量下载文件,只选择一次存储地址,便可以下载所有勾选文件?

问题描述

发送文件ID给后台,后台把文件打包压缩发送给前端的已经实现了。

目前的需求是,除了后台打包的方法,能不能浏览器只选择一次存储地址,就能够把所有文件下载下来。各位大佬支支招

 

解决方案:

使用down2组件

JavaScript

引入头

<head>

    <metahttp-equiv=”Content-Type”content=”text/html; charset=utf-8″/>

    <title>donw2-多文件演示页面</title>

    <linktype=”text/css”href=”js/down.css”rel=”Stylesheet”/>

    <scripttype=”text/javascript”src=”js/jquery-1.4.min.js”></script>

    <scripttype=”text/javascript”src=”js/down.app.js”charset=”utf-8″></script>

    <scripttype=”text/javascript”src=”js/down.edge.js”charset=”utf-8″></script>

    <scripttype=”text/javascript”src=”js/down.file.js”charset=”utf-8″></script>

    <scripttype=”text/javascript”src=”js/down.folder.js”charset=”utf-8″></script>

    <scripttype=”text/javascript”src=”js/down.js”charset=”utf-8″></script>

</head>

 

创建down2对象

var downer = new DownloaderMgr();

downer.Config[“Folder”] = “”;//设置默认下载路径。

//挂载事件

downer.event.taskCreate = function (obj) { $(document.body).append(文件ID:” + obj.fileSvr.id) + “<br/>”; };

downer.event.downProcess = function (obj) { };

downer.event.downStoped = function (obj) { };

downer.event.downComplete = function (obj) {

    $(document.body).append(‘<div>本地路径:’ + obj.fileSvr.pathLoc + ‘</div>’);

};

downer.event.downError = function (obj, err) { };

downer.event.queueComplete = function () { $(document.body).append(“<div>队列完成</div>”); };

 

批量下载url

$(“#btn-down-files”).click(function () {

    if (downer.Config[“Folder”] == “”) { downer.open_folder(); return; }

    var urls = [

        { fileUrl: “http://res2.ncmem.com/res/images/ie11.png” }

        , { fileUrl: “http://res2.ncmem.com/res/images/up6.1/down.png” }

        , { fileUrl: “http://res2.ncmem.com/res/images/firefox.png” }

        , { fileUrl: “http://res2.ncmem.com/res/images/edge.png” }

        , { fileUrl: “http://res2.ncmem.com/res/images/up6.1/cloud.png” }

        , { fileUrl: “http://res2.ncmem.com/res/images/home/w.png” }

        , { fileUrl: “http://res2.ncmem.com/res/images/img.png” }

    ];

    downer.app.addUrls(urls);

});

 

当成一个文件夹下载

$(“#btn-down-json”).click(function () {

    if (downer.Config[“Folder”] == “”) { downer.open_folder(); return; }

    var fd = {

        nameLoc: 图片列表”

        , files: [

            { fileUrl: “http://res2.ncmem.com/res/images/ie11.png” }

            , { fileUrl: “http://res2.ncmem.com/res/images/up6.1/down.png” }

            , { fileUrl: “http://res2.ncmem.com/res/images/firefox.png” }

            , { fileUrl: “http://res2.ncmem.com/res/images/edge.png” }

            , { fileUrl: “http://res2.ncmem.com/res/images/up6.1/cloud.png” }

            , { fileUrl: “http://res2.ncmem.com/res/images/home/w.png” }

            , { fileUrl: “http://res2.ncmem.com/res/images/img.png” }

        ]

    };

    downer.app.addJson(fd);

});

 

下载多级目录

$(“#btn-down-fd”).click(function () {

    if (downer.Config[“Folder”] == “”) { downer.open_folder(); return; }

    var fd = {

        nameLoc: 测试文件夹”

        , files: [

            { fileUrl: “http://www.ncmem.com/images/ico-ftp.jpg” }

            , { fileUrl: “http://www.ncmem.com/images/ico-up.jpg” }

        ]

        , folders: [

            {

                nameLoc: 图片1″

                , files: [

                    { fileUrl: “http://www.ncmem.com/images/ico-ftp.jpg” }

                    , { fileUrl: “http://www.ncmem.com/images/ico-up.jpg” }

                    , { fileUrl: “http://www.ncmem.com/images/ico-capture.jpg” }

                    , { fileUrl: “http://www.ncmem.com/images/ico-imageuploader.gif” }

                    , { fileUrl: “http://www.ncmem.com/images/ico-wordpaster.gif” }

                ]

                , folders: [

                    {

                        nameLoc: 软件”

                        , files: [

                            { fileUrl: “http://res2.ncmem.com/res/images/edit-file.png” }

                        ]

                    }

                ]

            }

        ]

    };

    downer.app.addJson(fd);

});

 

自定义下载文件名称

$(“#btn-down-svr”).click(function () {

    if (downer.Config[“Folder”] == “”) { downer.open_folder(); return; }

    var urls = [

        { fileUrl: “http://localhost:90/db/down.aspx”, nameLoc: “test.exe” }

        , { fileUrl: “http://localhost:90/db/down.aspx”, nameLoc: “test-1.exe” }

    ];

    downer.app.addUrls(urls);

});

实现效果:

 

 

希望本文所述对大家的asp.net#程序设计有所帮助。

网上示例:http://blog.ncmem.com/wordpress/2019/08/28/net文件批量下载/