jquery-ajax實現文件批量下載

需求：

支持文件批量下載。

使用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>

    <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>

 

效果：

 

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