Jak mogę pozwolić użytkownikowi pobrać wiele plików po kliknięciu przycisku?

Mam więc działający serwer httpd, który ma łącza do wielu plików. Powiedzmy użytkownik wybierze trzy pliki z listy plików do pobrania i oni się na:Jak mogę pozwolić użytkownikowi pobrać wiele plików po kliknięciu przycisku?

mysite.com/file1 
mysite.com/file2 
mysite.com/file3

Po kliknięciu na przycisk Pobierz I chcesz je pobrać te trzy pliki z linków powyżej.

Mój button download wyglądał:

var downloadButton = new Ext.Button({ 
    text: "Download", 
    handler: function(){ 
    //download the three files here 
    } 
});

Źródło

2013-08-26 Grammin

zip bani jeśli jesteś na, powiedzmy, telefon. możesz po prostu wyzwolić wszystkie trzy pobrania, a chrome rozpoznaje to i pyta o użycie, jeśli chce zezwolić twojej witrynie na "pobieranie wielu plików". jeśli chcesz używać zip, możesz ajax w plikach, skompresować je za pomocą jszip, a następnie pobrać plik zip z wynikowego obiektu drzewa JS. – dandavis

Jaki jest najlepszy sposób uruchomienia pobierania? window.open ("mysite.com/file1")? – Grammin

Lubię używać metod js (ex danml.com/js/download.js), gdy są dostępne, lub save, który pobiera daneURL.Zwykle jednak nie pobieram plików, więcej ciągów generowanych przez JS, więc weź moją radę z przymrużeniem oka – dandavis

Najlepszym sposobem, aby to zrobić, aby mieć swoje pliki spakowane i link do tego:

Inne rozwiązanie można znaleźć tutaj: How to make a link open multiple pages when clicked

Co oznacza:

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'); 
});

Mimo to, chciałbym nadal iść z skompresowanie pliku, ponieważ realizacja wymaga JavaScript, a także może czasami być blokowane wyskakujące okienka.

Źródło

2013-08-26 19:59:00 Tanuj

Tak więc nie mam dostępu do funkcji preventDefault(), tak czy inaczej mogę poczekać, aż użytkownik zrobi akcja na pierwszym pliku przed otwarciem drugiego? To, co się dzieje, przechodzi bezpośrednio do trzeciego pliku i nie mogę pobrać dwóch pierwszych. – Grammin

O jakim działaniu mówisz? Ponieważ nie jestem pewien, czy możesz to śledzić. – Tanuj

Moje połączenie to window.open ("mysite.com/file1", "_parent"); która przesłania wszystkie pozostałe okna (co nie działa, ponieważ muszę czekać na interakcję użytkownika w każdym oknie). Powodem, dla którego używam _self, ponieważ nie chcę przełączać okien, chcę pozostać w oknie nadrzędnym. – Grammin

można:

ZIP wybrane pliki i odesłać jeden spakowany plik.
Otwórz wiele okien podręcznych, z których każdy monituje o pobranie.

Uwaga - opcja pierwsza jest obiektywnie lepsza.

Edit Znaleziony opcję trzy: https://stackoverflow.com/a/9425731/1803682

Źródło

2013-08-26 19:48:26 Matthew

 <!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(); 
    }); 
}   


}]);

przykład plunker: https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview

Źródło

2016-05-03 08:53:04 suresh

Była to metoda, która pracowała dla mnie najlepsze i nie otwierają się nowe karty, ale po prostu pobrane pliki/images ja wymagane:

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); 
});

Źródło

2017-06-30 17:11:58 Dan

Możesz to zrobić, tworząc zdarzenia myszy i wysyłając je do przycisku. 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);

Źródło

2017-11-03 18:46:11 PolyGlot

Jak mogę pozwolić użytkownikowi pobrać wiele plików po kliknięciu przycisku?

Odpowiedz

Powiązane problemy