多文件下载前端实现

最新推荐文章于 2024-08-04 14:35:12 发布

昨日再显

最新推荐文章于 2024-08-04 14:35:12 发布

阅读量895

点赞数

本文链接：https://blog.csdn.net/weixin_45896131/article/details/114899288

版权

原理
1.href下载静态文件
2.downloadMultipleFile()轮询的方式触发href下载
代码

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0, minimum-scale=1.0,
    maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<script>
    function downloadMultipleFile() {
        for (var i = 0; i < 5; i++) {
            //静态文件存放路径
            document.getElementById("downloadMultipleFileHref").href = "/dreamfuture/img/category/" + i + ".jpg";
            //静态文件下载到本地默认文件夹下名称
            document.getElementById("downloadMultipleFileHref").download = i + ".jpg";
            document.getElementById("downloadMultipleFileHref").click();
        }
    }
</script>
<div class="addTable">
    <div class="input-group">
                <span class="input-group-addon">下载多个文件
                    <i class="bi bi-cloud-arrow-down-fill"></i></span>
        <input type="button" value="下载" name="downloadMultipleFile" onclick="downloadMultipleFile()"></input>
    </div>
    <a href="#" download="#" style="visibility: hidden" id="downloadMultipleFileHref">href下载</a>
</div>
</body>
</html>