Tôi không chắc liệu điều này có khả thi bằng cách sử dụng các công nghệ web tiêu chuẩn hay không.
Tôi muốn người dùng có thể tải xuống nhiều tệp trong một hành động. Đó là bấm vào hộp kiểm bên cạnh tệp, sau đó lấy tất cả các tệp đã được chọn.
Có thể không - nếu có thì bạn đề xuất chiến lược cơ bản nào. Tôi biết mình có thể sử dụng công nghệ sao chổi để tạo các sự kiện phía máy chủ kích hoạt HttpResponse nhưng tôi hy vọng có một cách đơn giản hơn.
Câu trả lời:
HTTP không hỗ trợ tải xuống nhiều tệp cùng một lúc.
Có hai giải pháp:
var links = [
'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.exe',
'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.dmg',
'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.jar'
];
function downloadAll(urls) {
var link = document.createElement('a');
link.setAttribute('download', null);
link.style.display = 'none';
document.body.appendChild(link);
for (var i = 0; i < urls.length; i++) {
link.setAttribute('href', urls[i]);
link.click();
}
document.body.removeChild(link);
}<button onclick="downloadAll(window.links)">Test me!</button>link.setAttribute('download', null);đổi tên tất cả các tệp của tôi thành null.
link.setAttribute('download',filename)vòng lặp bên trong. Điều này cho phép bạn đặt tên tệp bất kỳ thứ gì bạn muốn. Ngoài ra, tôi tin rằng nó chỉ cần là tên tệp không bao gồm URL. Cuối cùng tôi đã gửi hai mảng: một mảng có URL đầy đủ và một mảng chỉ có tên tệp.
Minecraft.jar.
Bạn có thể tạo một bộ iframe ẩn tạm thời, bắt đầu tải xuống bằng GET hoặc POST bên trong chúng, đợi quá trình tải xuống bắt đầu và xóa iframe:
<!DOCTYPE HTML>
<html>
<body>
<button id="download">Download</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$('#download').click(function() {
download('http://nogin.info/cv.doc','http://nogin.info/cv.doc');
});
var download = function() {
for(var i=0; i<arguments.length; i++) {
var iframe = $('<iframe style="visibility: collapse;"></iframe>');
$('body').append(iframe);
var content = iframe[0].contentDocument;
var form = '<form action="' + arguments[i] + '" method="GET"></form>';
content.write(form);
$('form', content).submit();
setTimeout((function(iframe) {
return function() {
iframe.remove();
}
})(iframe), 2000);
}
}
</script>
</body>
</html>
Hoặc, không có jQuery:
function download(...urls) {
urls.forEach(url => {
let iframe = document.createElement('iframe');
iframe.style.visibility = 'collapse';
document.body.append(iframe);
iframe.contentDocument.write(
`<form action="${url.replace(/\"/g, '"')}" method="GET"></form>`
);
iframe.contentDocument.forms[0].submit();
setTimeout(() => iframe.remove(), 2000);
});
}
setTimeout()?
Giải pháp này hoạt động trên các trình duyệt và không kích hoạt cảnh báo. Thay vì tạo một iframe, ở đây chúng tôi tạo một liên kết cho mỗi tệp. Điều này ngăn các thông báo cảnh báo xuất hiện.
Để xử lý phần lặp, chúng tôi sử dụng setTimeout, điều này cần thiết để nó hoạt động trong IE.
/**
* Download a list of files.
* @author speedplane
*/
function download_files(files) {
function download_next(i) {
if (i >= files.length) {
return;
}
var a = document.createElement('a');
a.href = files[i].download;
a.target = '_parent';
// Use a.download if available, it prevents plugins from opening.
if ('download' in a) {
a.download = files[i].filename;
}
// Add a to the doc for click to work.
(document.body || document.documentElement).appendChild(a);
if (a.click) {
a.click(); // The click method is supported by most browsers.
} else {
$(a).click(); // Backup using jquery
}
// Delete the temporary link.
a.parentNode.removeChild(a);
// Download the next file with a small timeout. The timeout is necessary
// for IE, which will otherwise only download the first file.
setTimeout(function() {
download_next(i + 1);
}, 500);
}
// Initiate the first download.
download_next(0);
}<script>
// Here's a live example that downloads three test text files:
function do_dl() {
download_files([
{ download: "http://www.nt.az/reg.txt", filename: "regs.txt" },
{ download: "https://www.w3.org/TR/PNG/iso_8859-1.txt", filename: "standards.txt" },
{ download: "http://qiime.org/_static/Examples/File_Formats/Example_Mapping_File.txt", filename: "example.txt" },
]);
};
</script>
<button onclick="do_dl();">Test downloading 3 text files.</button>Google Chrome Version 76.0.3809.100 (Official Build) (64-bit).
Cách dễ nhất là phân phát nhiều tệp được gộp chung vào một tệp ZIP.
Tôi cho rằng bạn có thể bắt đầu tải xuống nhiều tệp bằng cách sử dụng nhiều khung nội tuyến hoặc cửa sổ bật lên, nhưng từ quan điểm khả năng sử dụng, tệp ZIP vẫn tốt hơn. Ai muốn nhấp qua mười hộp thoại "Lưu dưới dạng" mà trình duyệt sẽ hiển thị?
Tôi đồng ý rằng tệp zip là một giải pháp gọn gàng hơn ... Nhưng nếu bạn phải đẩy nhiều tệp, đây là giải pháp mà tôi đã đưa ra. Nó hoạt động trên IE 9 trở lên (có thể cả phiên bản thấp hơn - tôi chưa thử nghiệm nó), Firefox, Safari và Chrome. Chrome sẽ hiển thị thông báo cho người dùng để họ đồng ý tải xuống nhiều tệp trong lần đầu tiên trang web của bạn sử dụng.
function deleteIframe (iframe) {
iframe.remove();
}
function createIFrame (fileURL) {
var iframe = $('<iframe style="display:none"></iframe>');
iframe[0].src= fileURL;
$('body').append(iframe);
timeout(deleteIframe, 60000, iframe);
}
// This function allows to pass parameters to the function in a timeout that are
// frozen and that works in IE9
function timeout(func, time) {
var args = [];
if (arguments.length >2) {
args = Array.prototype.slice.call(arguments, 2);
}
return setTimeout(function(){ return func.apply(null, args); }, time);
}
// IE will process only the first one if we put no delay
var wait = (isIE ? 1000 : 0);
for (var i = 0; i < files.length; i++) {
timeout(createIFrame, wait*i, files[i]);
}
Tác dụng phụ duy nhất của kỹ thuật này, là người dùng sẽ thấy độ trễ giữa gửi và hộp thoại tải xuống hiển thị. Để giảm thiểu tác động này, tôi khuyên bạn nên sử dụng kỹ thuật được mô tả ở đây và đối với câu hỏi này. Phát hiện khi trình duyệt nhận được tệp tải xuống có cài đặt cookie với tệp của bạn để biết tệp đã bắt đầu tải xuống. Bạn sẽ phải kiểm tra cookie này ở phía máy khách và gửi nó ở phía máy chủ. Đừng quên đặt đường dẫn thích hợp cho cookie của bạn nếu không bạn có thể không nhìn thấy nó. Bạn cũng sẽ phải điều chỉnh giải pháp để tải xuống nhiều tệp.
Phiên bản jQuery của iframe trả lời:
function download(files) {
$.each(files, function(key, value) {
$('<iframe></iframe>')
.hide()
.attr('src', value)
.appendTo($('body'))
.load(function() {
var that = this;
setTimeout(function() {
$(that).remove();
}, 100);
});
});
}
download(['http://nogin.info/cv.doc','http://nogin.info/cv.doc']);Tuy nhiên, điều này không hoạt động để tải xuống tệp hình ảnh.
Giải pháp góc cạnh:
HTML
<!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();
});
}
}]);
ví dụ làm việc: https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview
Để cải thiện câu trả lời của @Dmitry Nogin: điều này đã hoạt động trong trường hợp của tôi.
Tuy nhiên, nó không được thử nghiệm, vì tôi không chắc hộp thoại tệp hoạt động như thế nào trên các kết hợp hệ điều hành / trình duyệt khác nhau. (Như vậy wiki cộng đồng.)
<script>
$('#download').click(function () {
download(['http://www.arcelormittal.com/ostrava/doc/cv.doc',
'http://www.arcelormittal.com/ostrava/doc/cv.doc']);
});
var download = function (ar) {
var prevfun=function(){};
ar.forEach(function(address) {
var pp=prevfun;
var fun=function() {
var iframe = $('<iframe style="visibility: collapse;"></iframe>');
$('body').append(iframe);
var content = iframe[0].contentDocument;
var form = '<form action="' + address + '" method="POST"></form>';
content.write(form);
$(form).submit();
setTimeout(function() {
$(document).one('mousemove', function() { //<--slightly hacky!
iframe.remove();
pp();
});
},2000);
}
prevfun=fun;
});
prevfun();
}
</script>Tính năng này hoạt động trên tất cả các trình duyệt (IE11, firefox, Edge, Chrome và Chrome Mobile) Tài liệu của tôi nằm trong nhiều phần tử được chọn. Các trình duyệt dường như có vấn đề khi bạn cố gắng thực hiện quá nhanh ... Vì vậy, tôi đã sử dụng thời gian chờ.
//user clicks a download button to download all selected documents
$('#downloadDocumentsButton').click(function () {
var interval = 1000;
//select elements have class name of "document"
$('.document').each(function (index, element) {
var doc = $(element).val();
if (doc) {
setTimeout(function () {
window.location = doc;
}, interval * (index + 1));
}
});
});
Đây là một giải pháp sử dụng các lời hứa:
function downloadDocs(docs) {
docs[0].then(function (result) {
if (result.web) {
window.open(result.doc);
}
else {
window.location = result.doc;
}
if (docs.length > 1) {
setTimeout(function () { return downloadDocs(docs.slice(1)); }, 2000);
}
});
}
$('#downloadDocumentsButton').click(function () {
var files = [];
$('.document').each(function (index, element) {
var doc = $(element).val();
var ext = doc.split('.')[doc.split('.').length - 1];
if (doc && $.inArray(ext, docTypes) > -1) {
files.unshift(Promise.resolve({ doc: doc, web: false }));
}
else if (doc && ($.inArray(ext, webTypes) > -1 || ext.includes('?'))) {
files.push(Promise.resolve({ doc: doc, web: true }));
}
});
downloadDocs(files);
});
Cho đến nay, giải pháp dễ dàng nhất (ít nhất là trong ubuntu / linux):
Hoạt động như một sự quyến rũ.
Để giải quyết vấn đề này, tôi đã tạo một thư viện JS để truyền trực tiếp nhiều tệp vào một tệp zip ở phía máy khách. Tính năng độc đáo chính là nó không có giới hạn kích thước từ bộ nhớ (mọi thứ đều được truyền trực tuyến) cũng như định dạng zip (nó sử dụng zip64 nếu nội dung nhiều hơn 4GB).
Vì nó không nén, nó cũng rất hiệu quả.
Tập lệnh sau đã thực hiện công việc này một cách duyên dáng.
var urls = [
'https://images.pexels.com/photos/432360/pexels-photo-432360.jpeg',
'https://images.pexels.com/photos/39899/rose-red-tea-rose-regatta-39899.jpeg'
];
function downloadAll(urls) {
for (var i = 0; i < urls.length; i++) {
forceDownload(urls[i], urls[i].substring(urls[i].lastIndexOf('/')+1,urls[i].length))
}
}
function forceDownload(url, fileName){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function(){
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
var tag = document.createElement('a');
tag.href = imageUrl;
tag.download = fileName;
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
}
xhr.send();
}
Tôi đang tìm giải pháp để thực hiện việc này, nhưng việc giải nén các tệp trong javascript không được sạch như tôi muốn. Tôi quyết định đóng gói các tệp thành một tệp SVG duy nhất.
Nếu bạn có các tệp được lưu trữ trên máy chủ (tôi thì không), bạn có thể chỉ cần đặt href trong SVG.
Trong trường hợp của tôi, tôi sẽ chuyển đổi các tệp thành base64 và nhúng chúng vào SVG.
Chỉnh sửa: SVG hoạt động rất tốt. Nếu bạn chỉ tải xuống các tệp, ZIP có thể tốt hơn. Nếu bạn định hiển thị các tệp, thì SVG có vẻ vượt trội hơn.
Khi sử dụng các thành phần Ajax, có thể bắt đầu tải xuống nhiều lần. Vì vậy, bạn phải sử dụng https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow
Thêm một phiên bản AJAXDownload vào Trang của bạn hoặc bất cứ thứ gì. Tạo một AjaxButton và ghi đè onSubmit. Tạo một AbstractAjaxTimerBehavior và bắt đầu tải xuống.
button = new AjaxButton("button2") {
private static final long serialVersionUID = 1L;
@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form)
{
MultiSitePage.this.info(this);
target.add(form);
form.add(new AbstractAjaxTimerBehavior(Duration.milliseconds(1)) {
@Override
protected void onTimer(AjaxRequestTarget target) {
download.initiate(target);
}
});
}
Chúc bạn tải xuống vui vẻ!
Mã dưới đây 100% hoạt động.
Bước 1 : Dán dưới mã trong index.html tập tin
<!DOCTYPE html>
<html ng-app="ang">
<head>
<title>Angular Test</title>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller="myController">
<button ng-click="files()">Download All</button>
</div>
<script src="angular.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Bước 2 : Dán dưới mã trong index.js tập tin
"use strict";
var x = angular.module('ang', []);
x.controller('myController', function ($scope, $http) {
var arr = [
{file:"http://localhost/angularProject/w3logo.jpg", fileName: "imageone"},
{file:"http://localhost/angularProject/cv.doc", fileName: "imagetwo"},
{file:"http://localhost/angularProject/91.png", fileName: "imagethree"}
];
$scope.files = function() {
angular.forEach(arr, function(val, key) {
$http.get(val.file)
.then(function onSuccess(response) {
console.log('res', response);
var link = document.createElement('a');
link.setAttribute('download', val.fileName);
link.setAttribute('href', val.file);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch(function onError(error) {
console.log('error', error);
})
})
};
});
LƯU Ý : Đảm bảo rằng cả ba tệp sẽ tải xuống sẽ được đặt trong cùng một thư mục cùng với các tệp angleProject / index.html hoặc angleProject / index.js .
Lấy danh sách url bằng lệnh gọi ajax và sau đó sử dụng plugin jquery để tải xuống nhiều tệp song song.
$.ajax({
type: "POST",
url: URL,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
async: true,
cache: false,
beforeSend: function () {
blockUI("body");
},
complete: function () { unblockUI("body"); },
success: function (data) {
//here data --> contains list of urls with comma seperated
var listUrls= data.DownloadFilePaths.split(',');
listUrls.forEach(function (url) {
$.fileDownload(url);
});
return false;
},
error: function (result) {
$('#mdlNoDataExist').modal('show');
}
});
Đây là cách tôi làm điều đó. Tôi mở nhiều tệp ZIP nhưng cũng có loại dữ liệu khác (tôi xuất projet ở dạng PDF và cùng lúc nhiều tệp ZIP với tài liệu).
Tôi chỉ sao chép phần trước của mã của mình. Cuộc gọi từ một nút trong danh sách:
$url_pdf = "pdf.php?id=7";
$url_zip1 = "zip.php?id=8";
$url_zip2 = "zip.php?id=9";
$btn_pdf = "<a href=\"javascript:;\" onClick=\"return open_multiple('','".$url_pdf.",".$url_zip1.",".$url_zip2."');\">\n";
$btn_pdf .= "<img src=\"../../../images/icones/pdf.png\" alt=\"Ver\">\n";
$btn_pdf .= "</a>\n"
Vì vậy, một cuộc gọi cơ bản đến một quy trình JS (Quy tắc Vanilla!). đây là quy trình JS:
function open_multiple(base,url_publication)
{
// URL of pages to open are coma separated
tab_url = url_publication.split(",");
var nb = tab_url.length;
// Loop against URL
for (var x = 0; x < nb; x++)
{
window.open(tab_url[x]);
}
// Base is the dest of the caller page as
// sometimes I need it to refresh
if (base != "")
{
window.location.href = base;
}
}
Mẹo là KHÔNG cung cấp liên kết trực tiếp của tệp ZIP mà phải gửi nó đến trình duyệt. Như thế này:
$type_mime = "application/zip, application/x-compressed-zip";
$the_mime = "Content-type: ".$type_mime;
$tdoc_size = filesize ($the_zip_path);
$the_length = "Content-Length: " . $tdoc_size;
$tdoc_nom = "Pesquisa.zip";
$the_content_disposition = "Content-Disposition: attachment; filename=\"".$tdoc_nom."\"";
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header($the_mime);
header($the_length);
header($the_content_disposition);
// Clear the cache or some "sh..." will be added
ob_clean();
flush();
readfile($the_zip_path);
exit();
<p class="style1">
<a onclick="downloadAll(window.links)">Balance Sheet Year 2014-2015</a>
</p>
<script>
var links = [
'pdfs/IMG.pdf',
'pdfs/IMG_0001.pdf',
'pdfs/IMG_0002.pdf',
'pdfs/IMG_0003.pdf',
'pdfs/IMG_0004.pdf',
'pdfs/IMG_0005.pdf',
'pdfs/IMG_0006.pdf'
];
function downloadAll(urls) {
var link = document.createElement('a');
link.setAttribute('download','Balance Sheet Year 2014-2015');
link.style.display = 'none';
document.body.appendChild(link);
for (var i = 0; i < urls.length; i++) {
link.setAttribute('href', urls[i]);
link.click();
}
document.body.removeChild(link);
}
</script>