Bunun standart web teknolojileri kullanılarak mümkün olup olmadığından emin değilim.
Kullanıcının tek bir işlemle birden çok dosyayı indirebilmesini istiyorum. Bu, dosyaların yanındaki onay kutularını tıklamak ve ardından işaretlenen tüm dosyaları almaktır.
Mümkün mü - eğer öyleyse hangi temel stratejiyi önerirsiniz? Bir HttpResponse'u tetikleyen sunucu tarafı olayları oluşturmak için kuyrukluyıldız teknolojisini kullanabileceğimi biliyorum, ancak daha basit bir yol olduğunu umuyorum.
Yanıtlar:
HTTP, aynı anda birden fazla dosya indirmeyi desteklemez.
İki çözüm var:
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);tüm dosyalarımı null olarak yeniden adlandırdı.
link.setAttribute('download',filename)Döngünün içini ekleyin . Bu, dosyalara istediğiniz herhangi bir ad vermenizi sağlar. Ayrıca, URL'yi içermeyen yalnızca dosya adı olması gerektiğine inanıyorum. Sonunda iki dizi gönderdim: biri tam URL'ye ve diğeri sadece dosya adına sahip.
Minecraft.jar.
Geçici bir gizli iframe seti oluşturabilir, içlerinde GET veya POST ile indirmeyi başlatabilir, indirmelerin başlamasını bekleyebilir ve iframe'leri kaldırabilirsiniz:
<!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>Veya jQuery olmadan:
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()?
Bu çözüm, tarayıcılarda çalışır ve uyarıları tetiklemez. Bir oluşturmak yerine iframe, burada her dosya için bir bağlantı oluşturuyoruz. Bu, uyarı mesajlarının açılmasını önler.
Döngü parçasını işlemek için setTimeout, IE'de çalışması için gerekli olanı kullanıyoruz .
/**
* 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).
En kolay yol, bir ZIP dosyası içinde paketlenmiş birden çok dosyayı sunmaktır.
Sanırım bir grup iframe veya pop-up kullanarak birden fazla dosya indirmeyi başlatabilirsiniz, ancak kullanılabilirlik açısından bir ZIP dosyası daha iyidir. Tarayıcının açacağı on "Farklı Kaydet" iletişim kutusunu kim tıklamak ister?
Bir zip dosyasının daha iyi bir çözüm olduğuna katılıyorum ... Ancak birden fazla dosyayı itmeniz gerekiyorsa, bulduğum çözüm burada. IE 9 ve üzeri (muhtemelen daha düşük sürüm - test etmedim), Firefox, Safari ve Chrome'da çalışır. Chrome, siteniz ilk kez kullandığında birden çok dosyayı indirme sözleşmesini almak için kullanıcıya bir mesaj görüntüler.
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]);
}
Bu tekniğin tek yan etkisi, kullanıcının gönderme ve indirme iletişim kutusu arasında bir gecikme görmesidir. Bu etkiyi en aza indirmek için, burada ve bu soruda açıklanan tekniği kullanmanızı öneririm . Tarayıcının, indirmeye başladığını bilmek için dosyanızla birlikte bir çerez ayarlamadan oluşan dosya indirme işlemi aldığını tespit edin. Bu çerezi istemci tarafında kontrol etmeniz ve sunucu tarafında göndermeniz gerekecektir. Tanımlama bilginiz için doğru yolu ayarlamayı unutmayın yoksa göremeyebilirsiniz. Ayrıca çözümü birden çok dosya indirme için uyarlamanız gerekecektir.
İframe'in jQuery sürümü yanıt verir:
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']);Ancak, bu resim dosyalarını indirmek için çalışmaz.
Açısal çözüm:
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();
});
}
}]);
çalışma örneği: https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview
@Dmitry Nogin'in cevabını geliştirmek için: bu benim durumumda işe yaradı.
Ancak, dosya diyaloğunun çeşitli işletim sistemi / tarayıcı kombinasyonlarında nasıl çalıştığından emin olmadığım için test edilmedi. (Böylece topluluk wiki.)
<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>Bu, tüm tarayıcılarda (IE11, firefox, Edge, Chrome ve Chrome Mobile) çalışır Belgelerim birden çok seçili öğede. Çok hızlı yapmaya çalıştığınızda tarayıcıların sorunları var gibi görünüyor ... Ben de bir zaman aşımı kullandım.
//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));
}
});
});
Bu, vaatleri kullanan bir çözümdür:
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);
});
Şimdiye kadar en kolay çözüm (en azından ubuntu / linux'ta):
Tıkır tıkır çalışıyor.
Bunu çözmek için, birden çok dosyayı doğrudan istemci tarafındaki bir zip'e aktarmak için bir JS kitaplığı oluşturdum. Ana benzersiz özelliği, bellekten (her şey yayınlanır) veya zip biçiminde (içerik 4 GB'tan fazlaysa zip64 kullanır) boyut sınırının olmamasıdır.
Sıkıştırma yapmadığı için, aynı zamanda çok performanslıdır.
Aşağıdaki betik bu işi zarafetle yaptı.
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();
}
Bunu yapmak için bir çözüm arıyorum, ancak dosyaları javascript'te açmak istediğim kadar temiz olmadı. Dosyaları tek bir SVG dosyasında sarmaya karar verdim.
Sunucuda depolanan dosyalarınız varsa (Bende yok), href'i SVG'de ayarlayabilirsiniz.
Benim durumumda, dosyaları base64'e dönüştürüp SVG'ye yerleştireceğim.
Düzenleme: SVG çok iyi çalıştı. Yalnızca dosyaları indirecekseniz, ZIP daha iyi olabilir. Dosyaları görüntüleyecekseniz, SVG daha üstün görünüyor.
Ajax bileşenlerini kullanırken, birden çok indirme başlatmak mümkündür. Bu nedenle kullanmalısın https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow
Sayfanıza bir AJAXDownload örneği ekleyin. Bir AjaxButton oluşturun ve onSubmit'i geçersiz kılın. AbstractAjaxTimerBehavior oluşturun ve indirmeye başlayın.
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);
}
});
}
Mutlu indirmeler!
Kodun altında% 100 çalışıyor.
Adım 1 : Aşağıdaki kodu index.html dosyasına yapıştırın
<!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>
Adım 2 : Aşağıdaki kodu index.js dosyasına yapıştırın
"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);
})
})
};
});
NOT : İndirilecek üç dosyanın da angularProject / index.html veya angularProject / index.js dosyalarıyla birlikte aynı klasöre yerleştirileceğinden emin olun .
Ajax çağrısı ile url listesi almak ve ardından birden fazla dosyayı paralel indirmek için jquery eklentisini kullanmak .
$.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');
}
});
İşte bunu yapmamın yolu. Birden çok ZIP açıyorum, ancak başka türden verileri de (projeyi PDF olarak ve aynı zamanda belgeli birçok ZIP olarak dışa aktarıyorum).
Kodumun sadece eski bir kısmını kopyalıyorum. Listedeki bir düğmeden gelen çağrı:
$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"
Yani bir JS rutinine basit bir çağrı (Vanilya kuralları!). işte JS rutini:
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;
}
}
İşin püf noktası, ZIP dosyasının doğrudan bağlantısını VERMEMEK, onu tarayıcıya göndermektir. Bunun gibi:
$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>