需求：
支持文件批量下载。
使用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批量下载/