所以我有一個httpd服務器運行，其中有一堆文件的鏈接。比方說，用戶從文件列表中選擇三個文件下載和他們位於：單擊按鈕時，如何讓用戶下載多個文件？
mysite.com/file1
mysite.com/file2
mysite.com/file3
當他們點擊下載按鈕，我希望他們能夠從上面的鏈接下載這三個文件。
我的下載按鈕看起來是這樣的：
var downloadButton = new Ext.Button({
text: "Download",
handler: function(){
//download the three files here
}
});
要做到這一點，最好的辦法是讓你的文件，拉鍊，並鏈接到：
另一種解決方案可以在這裏找到：How to make a link open multiple pages when clicked
其中說明以下內容：
HTML：
<a href="#" class="yourlink">Download</a>
JS：
$('a.yourlink').click(function(e) {
e.preventDefault();
window.open('mysite.com/file1');
window.open('mysite.com/file2');
window.open('mysite.com/file3');
});
話雖如此，我還是會去的壓縮和解的文件，因爲這實現需要JavaScript和可有時也被阻止彈出窗口爲。
您可以：
注 - 選項一客觀上更好。
編輯 找到一個選項三：https://stackoverflow.com/a/9425731/1803682
<!doctype html>
<html ng-app='app'>
<head>
<title>
</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-cloack>
<div class="container" ng-controller='FirstCtrl'>
<table class="table table-bordered table-downloads">
<thead>
<tr>
<th>Select</th>
<th>File name</th>
<th>Downloads</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = 'tableData in tableDatas'>
<td>
<div class="checkbox">
<input type="checkbox" name="{{tableData.name}}" id="{{tableData.name}}" value="{{tableData.name}}" ng-model= 'tableData.checked' ng-change="selected()">
</div>
</td>
<td>{{tableData.fileName}}</td>
<td>
<a target="_self" id="download-{{tableData.name}}" ng-href="{{tableData.filePath}}" class="btn btn-success pull-right downloadable" download>download</a>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-success pull-right" ng-click='downloadAll()'>download selected</a>
<p>{{selectedone}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
app.js
var app = angular.module('app', []);
app.controller('FirstCtrl', ['$scope','$http', '$filter', function($scope, $http, $filter){
$scope.tableDatas = [
{name: 'value1', fileName:'file1', filePath: 'data/file1.txt', selected: true},
{name: 'value2', fileName:'file2', filePath: 'data/file2.txt', selected: true},
{name: 'value3', fileName:'file3', filePath: 'data/file3.txt', selected: false},
{name: 'value4', fileName:'file4', filePath: 'data/file4.txt', selected: true},
{name: 'value5', fileName:'file5', filePath: 'data/file5.txt', selected: true},
{name: 'value6', fileName:'file6', filePath: 'data/file6.txt', selected: false},
];
$scope.application = [];
$scope.selected = function() {
$scope.application = $filter('filter')($scope.tableDatas, {
checked: true
});
}
$scope.downloadAll = function(){
$scope.selectedone = [];
angular.forEach($scope.application,function(val){
$scope.selectedone.push(val.name);
$scope.id = val.name;
angular.element('#'+val.name).closest('tr').find('.downloadable')[0].click();
});
}
}]);
plunker例如：https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview
這是它的工作最適合我，並沒有開闢新的標籤，但剛剛下載的文件/圖片我所需要的方法：
var filesForDownload = [];
filesForDownload({ path: "/path/file1.txt", name: "file1.txt" });
filesForDownload({ path: "/path/file2.jpg", name: "file2.jpg" });
filesForDownload({ path: "/path/file3.png", name: "file3.png" });
filesForDownload({ path: "/path/file4.txt", name: "file4.txt" });
$jq('input.downloadAll').click(function(e)
{
e.preventDefault();
var temporaryDownloadLink = document.createElement("a");
temporaryDownloadLink.style.display = 'none';
document.body.appendChild(temporaryDownloadLink);
for(var n = 0; n < filesForDownload.length; n++)
{
var download = filesForDownload[n];
temporaryDownloadLink.setAttribute('href', download.path);
temporaryDownloadLink.setAttribute('download', download.name);
temporaryDownloadLink.click();
}
document.body.removeChild(temporaryDownloadLink);
});
你可以做到這一點，創建鼠標事件並將其分配到按鈕。如果你是，比方說，在手機上Sourse.
hrefList=['mysite.com/1.jpg', 'mysite.com/2.mp4', 'mysite.com/3.gif'];
buttonDownloadAll=document.createElement('a');
buttonDownloadAll.innerText='Download all';
buttonDownloadAll.href='';
buttonDownloadAll.download=false;
downloadFunc=function(){
buttonDownloadAll.setAttribute('onclick', '');
buttonDownloadAll.download=true;
for(var i=0; i<hrefList.length-1; i++){
buttonDownloadAll.href=hrefList[i];
var clickEvent = document.createEvent('MouseEvent');
\t \t clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
buttonDownloadAll.dispatchEvent(clickEvent);
}
buttonDownloadAll.setAttribute('onclick', 'downloadFunc()');
buttonDownloadAll.download=false;
buttonDownloadAll.href='';
};
buttonDownloadAll.setAttribute('onclick', 'downloadFunc()');
document.body.appendChild(buttonDownloadAll);
拉鍊很爛。你可以觸發全部三種下載，而且chrome甚至可以識別這種情況，並在他們希望允許你的站點「下載多個文件」時提示使用。如果你想使用zip，你可以在文件中使用ajax，使用jszip壓縮它們，然後從生成的JS樹形對象中下載zip文件。 – dandavis
什麼是觸發下載的最佳方式？ window.open（ 「mysite.com/file1」）？ – Grammin
我喜歡使用js方法（例如danml.com/js/download.js），或者使用dataURL的save。我通常不會下載文件，更多的字符串由JS生成，因此請接受我的建議，以一粒鹽 – dandavis