一、功能性需求和非功能性需求:
支持文件批量下载。不要java实现,需要在web中实现。
B/S模式,非C/S模式。
服务器不需要打包。
使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中。
支持大文件断点下载。比如下载10G的文件。
PC端全平台支持。Windows,macOS,Linux
全浏览器支持。ie6,ie7,ie8,ie9,ie10,ie11,edge,firefox,chrome,safari
支持文件夹结构下载。不希望在服务器打包,而是直接下载文件夹,下载后在本地文件夹结构和服务器保持一致。
//批量下载文件(打包)
function button_downloadplus(url) {
var rows = $('#exampleTableEvents').bootstrapTable('getSelections'); //返回所有选择的行,当没有选择的记录时,返回一个空数组
var $table = $("#exampleTableEvents");
//alert("进入reload");
//return;
if (rows.length == 0) {
alert("请选择要下载的数据", "error");
return;
};
var title = "您确定要下载选定的" + rows.length + "个文件及文件夹吗"
swal({
title: title,
text: "此下载占用系统资源,请勿频繁操作!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "是的,我要下载!",
cancelButtonText: "让我再考虑一下…",
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
if (isConfirm) {
post_url = url + "&time=" + new Date().getTime();
var ids = '';
//遍历所有选择的行数据,取每条数据对应的ID
$.each(rows, function(i, row) {
var file_type = 2;
if(row['file_type']=='文件夹'){
file_type = 1;
}
ids = ids + '{"id":' + row['id'] + ',"file_type":' + file_type +'};';
});
console.log(ids);
if(ids!=''){
ids = ids.slice(0,ids.length-1);}
//定义ajax请求参数
var param = {ids:ids};
console.log(param);
swal.close();
$("#loadingModal").modal('show');
$.dynamicSubmit(post_url,param);
$("#loadingModal").modal('hide'); //**********************分2步走,先服务器POST提交服务器打包文件,打包完成返回参数给客户端在下载打包后的值
} else {
swal("已取消", "您取消了删除操作!", "error")
}
})
}
/*
* 动态构建一个Form 并且提交
*/
$.dynamicSubmit = function (url, datas) {
var form = $('#dynamicForm');
if (form.length <= 0) {
form = $("<form>");
form.attr('id', 'dynamicForm');
form.attr('style', 'display:none');
form.attr('target', '');
form.attr('method', 'post');
$('body').append(form);
}
form = $('#dynamicForm');
form.attr('action', url);
form.empty();
if (datas && typeof (datas) == 'object') {
for (var item in datas) {
var $_input = $('<input>');
$_input.attr('type', 'hidden');
$_input.attr('name', item);
$_input.val(datas[item]);
$_input.appendTo(form);
}
}
form.submit();
}