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