html多文件下载只下载最后一张?

多文件下载
for循环内,下载图片,只能下载最后一张
我同事说是因为速度太快了,所以其他图片被最后一张覆盖了
现在需要加一条alert,给它一点反应时间才能全部下载(循环中下载多张图片)
请大家帮我看看,除了添加alert这种方式,还有什么方式能将它全部下载?谢谢

img

这是下载代码

<script type="text/javascript">
    //弹框
    $("#downloadImg").on("click", function () {
        download("filename", "jpg");
    });

    //开始下载
    function download(filename, filetype) {
        // 名字,后缀类型
        if (filename == "") {
            filename = "untitled";
        }
        if (filetype == "") {
            filetype = "png";
        }
        var imgs = $(".test");
        var totaladd = [];
        for (var i = 0; i < imgs.length; i++) {
            totaladd = $(imgs[i]).attr('src')
            //将nginx上传请求地址替换为下载请求
            totaladd = totaladd.replace('/profile', '/xiazai');
            var link = document.createElement('a');
            document.body.appendChild(link);
            link.download = filename + i + "." + filetype;
            link.href = totaladd;
            // alert(totaladd);加上这句,才可以全部下载
            // setTimeout( link.click(),3000);延迟三秒运行也没有效果
            link.click();
            // document.body.removeChild(link);

        }
    }

script>

for循环中使用let试一下 for(let i = 0; i < img.length; i++)


for (let i = 0; i < imgs.length; i++) {
          
            totaladd = $(imgs[i]).attr('src')
            //将nginx上传请求地址替换为下载请求
            totaladd = totaladd.replace('/profile', '/xiazai');

            setTimeout(() => {
              let link = document.createElement('a')
              link.download = filename + i + "." + filetype;
              link.href = totaladd;
              link.click();
            }, 300 * i)
        }

for中加个延时试试


for (let i = 0; i < imgs.length; i++) {
    // 加个延时
    setTimeout(() => {
        totaladd = $(imgs[i]).attr('src')
        //将nginx上传请求地址替换为下载请求
        totaladd = totaladd.replace('/profile', '/xiazai');
        let link = document.createElement('a');
        document.body.appendChild(link);
        link.download = filename + i + "." + filetype;
        link.href = totaladd;
        // alert(totaladd);加上这句,才可以全部下载
        // setTimeout( link.click(),3000);延迟三秒运行也没有效果
        link.click();
        // document.body.removeChild(link);
    }, 300 * i)
}

for循环里打印 下载的地址看看 打印 几次 。每次值是否不相同

建议你看下这篇博客html怎么实现网页中文件下载功能

加个 link.target = "_blank" 试试

方案一:试一下给每个下载标签加id
let e= document.createElement("a");
e.setAttribute("id",'img_'+i);
方案二:
下载压缩包

因为你需要在第一次下载完成后再去执行第二次下载,所以建议使用promiss

link.click(); 点击事件放到定时器里面。插入页面里的a元素要在页面里渲染完成,才能有点击事件

这应该是循环完了,才下载的

已解决
改为使用iframe标签


```javascript
    //弹框
    $("#downloadImg").on("click", function () {
        //图片路径集合
        let imgUrls = [];
        //图片集合
        var imgs = $(".test");
        //处理图片路径
        for (var i = 0; i < imgs.length; i++) {
            var totaladd = $(imgs[i]).attr('src');
            totaladd = totaladd.replace('/profile', '/xiazai');
            imgUrls[i] = totaladd;
        }
        //循环图片路径集合
        imgUrls.forEach(aa => {
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            iframe.style.height = 0;
            iframe.src = aa;
            document.body.appendChild(iframe);
            //不能马上将 iframe 删除,否则也会出现取消的情况
            setTimeout(() => {
                iframe.remove();
            }, 3000)

        })
    });


```用