需求：

支持文件批量下载。

使用JS能够实现批量下载，能够提供接口从指定url中下载文件并保存在本地指定路径中。

服务器不需要打包。

支持大文件断点下载。比如下载10G的文件。

PC端全平台支持。Windows,macOS,Linux

全浏览器支持。ie6,ie7,ie8,ie9,ie10,ie11,edge,firefox,chrome,safari

 

js代码

<script type=”text/javascript”>

    //全选控制   

    $(document).ready(function() {

        $(“#checkAll”).click(function() {

            if ($(“#checkAll”).prop(“checked”)) {

                $(“input[name=’checkbox’]”).prop(“checked”, true);

            } else {

                $(“input[name=’checkbox’]”).prop(“checked”, false);

            }

        })

    });

 

    //批量下载

    $(“#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);

});

 

    //json数据下载

    $(“#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);

});

 

    //自定义下载数据，db/down.aspx负责提供数据

    $(“#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);

});

 

    //自定义下载数据，db/down.aspx负责提供数据

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

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

        var fd = {

            nameLoc: “测试文件夹”

            , files: [

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

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

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

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

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

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

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

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

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

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

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

            ]

        };

        downer.app.addJson(fd);

    });

</script>

function toUpload(){ $(“input[type=checkbox]:checked:checked”).each(function() { //由于复选框一般选中的是多个,所以可以循环输出

             if ($(this).val() != “”&&$(this).val()!=”on”) { window.open(“${path }/test/download?id=”+$(this).val(),”navTab”); } }); }

 

引入头文件

<head>

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

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

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

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

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

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

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

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

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

</head>

 

效果：

 

网上例子：http://blog.ncmem.com/wordpress/2019/08/28/java批量下载/