Hoe progress bar linken aan een download ?

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Onderstaande progress bar voorbeeldcode start met een druk op de knop.
Is het mogelijk om de bar automatisch te laten opstarten bij het downloaden van een programma (als XYZ.asp of ABC.pdf of ...) ?
Dank voor tips.


Code: 
<!DOCTYPE html> 
<html> 
<style> 
  
#Progress_Status { 
  width: 50%; 
  background-color: #ddd; 
} 
  
#myprogressBar { 
  width: 1%; 
  height: 35px; 
  background-color: #4CAF50; 
  text-align: center; 
  line-height: 32px; 
  color: black; 
} 
  
  
</style> 
<body> 
  
<h3>Example of Progress Bar Using JavaScript</h3> 
  
<p>Download Status of a File:</p> 
  
<div id="Progress_Status"> 
  <div id="myprogressBar">1%</div> 
</div> 
  
<br> 
<button onclick="update()">Start Download</button>  
  
<script> 
  
function update() { 
  var element = document.getElementById("myprogressBar");    
  var width = 1; 
  var identity = setInterval(scene, 10); 
  function scene() { 
    if (width >= 100) { 
      clearInterval(identity); 
    } else { 
      width++;  
      element.style.width = width + '%';  
      element.innerHTML = width * 1  + '%'; 
    } 
  } 
} 
  
</script> 
  
</body> 
</html>
 
Voor uploaden via $_FILES in PHP kan het wel. Maar downloaden gaat niet via PHP. Dat doet de browser gewoon, en die geeft zelf al in procenten balkje aan, aan de hand van de bestandsgrootte.
 
Omdat je geen progressbar op de download functie van de browser kan zetten kan je dit in de html/jquery niet gebruiken. Je kan wel een XmlHttpRequest gebruiken maar dan heb je ook wat php nodig om het goed te laten werken. Lees even dit antwoord om je verder op weg te helpen.
 
Als ik het goed begrijp veronderstelt XmlHttpRequest ook gebruik van PHP - probleem met ASP ?
Misschien kan mijn probleem opgelost worden als ik de downloadtijd van de de file kan verkorten (beter dan een progress bar)
Kan SQL-code soms de oorzaak zijn van langere downloadtijd ? is dat eventueel te verhelpen ?
Dank voor suggesties.
 
Ik ben niet bekend met ASP en ASP.net.
Maar een SQL-query kan wel zorgen voor een lange downloadtijd.
Zorg daarom dat je queries goed geoptimaliseerd zijn.
 
Van asp(.net) weet ik nul,nul. Als ik google komen er wat resultaten bovendrijven maar alles lijkt ingewikkeld. Lees dit even bij paragraaf Asynchronously. In dit artikel hebben ze het over een progressbar, misschien kan je hiermee verder.
 
Ik denk dat een file download met progress bar best mogelijk moet zijn. In plaats van de file op de 'normale' manier te downloaden, zou je hem vanaf de server naar localstorage (of iets vergelijkbaars) kunnen downloaden. Vanuit daar kan je een blob download doen naar de computer, die zou dan redelijk instant moeten zijn. Mega.co.nz doet het op die manier.


Ik kwam het volgende tegen op StackOverflow, je kan vervolgens zelf wat knutselen om progress te checken van de XMLHttpRequest, en als de download klaar is, zelf een blob download starten met de data die je in localstorage hebt.


Javascript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var xhr = new XMLHttpRequest();
xhr.open("GET", "/pdf/download?id=" + id);
xhr.responseType = "blob";
xhr.onload = function() {
if(xhr.status && xhr.status === 200) {
savePdf(xhr.response, "download_" + id);
}
}
xhr.send();


function savePdf(pdf, key) {
var fileReader = new FileReader();


fileReader.onload = function (evt) {
var result = evt.target.result;


try {
localStorage.setItem(key, result);
} catch (e) {
console.log("Storage failed: " + e);
}
};


fileReader.readAsDataURL(pdf);
}
 
Laatst bewerkt:
Ziet er slim uit, alleen is niet bekend wat de response is van download in het stukje xhr.open("GET", "/pdf/download?id=" + id);

edit: iets aangepast en getest. Vraag is alleen wat de persoon doet in de (langere) tijd tijdens het downloaden naar localStorage?
Vooral als het een iets grotere pdf is bij een wat langzamere verbinding.

Code: 
var filePdf = "/test/pdf/bestand.pdf";

var xhr = new XMLHttpRequest();
xhr.open("GET", filePdf);
xhr.responseType = "blob";
xhr.onload = function() {
  if(xhr.status && xhr.status === 200) {
    savePdf(xhr.response, filePdf);
  }
}
xhr.send();

function savePdf(pdf, key) {
  var fileReader = new FileReader();
  fileReader.onload = function (evt) {
    var result = evt.target.result;
    try {
      console.log("localStorage");
      localStorage.setItem(key, result);
      // to do. blob download van result;
    } catch (e) {
      console.log("Storage failed: " + e);
    }
  };
  fileReader.readAsDataURL(pdf);
}
 
Laatst bewerkt:
Bron schrijft
Ziet er slim uit,
Klik om te vergroten...
probeer mee te volgen maar ...
hoe is dit script gekoppeld met de te downloaden file ?
hoe werkt de localStore in dit script ?
is een woordje uitleg over de (script)stappen te lezen ?
Sorry voor mijn vragen.
 
Ik weet niet of gelijktijdig met de blobs die worden gedownload een progressbar kan meelopen.
Misschien kan xvilo dit aangeven.
 
Ik heb een aantal pogingen gedaan maar liep tegen de volgende problemen aan
Cors, op te lossen door pagina en te downloaden bestand op hetzelfde sub.example.nl te houden.
Gzipped bestand geeft bestandsgrootte 0 bytes, op te lossen door hardcoded de filesize op te geven
Code: 
<button id="download-button">Download</button>
<a id="save-file" style="width:0; height:0; margin:0; padding:0; font:100 0/0 a; overflow:hidden;">Save As</a>
<br><progress id="progress" value="0"></progress>
<br><span id="progress-text"></span>
&nbsp; &nbsp;
<span id="download-progress-text"></span>
<script src="progressbar.js"></script>

Bestand: progressbar.js
Code: 
// --- invullen -------
var FileUrl  = "https://www.example.nl/files/pdf/informatie.pdf";
var FileName = "informatie.pdf";
var FileSize = 8426013;
// --------------------

document.querySelector('#download-button').addEventListener('click', function() {

    // id progress bar
    var progress = document.getElementById("progress");

    // id progress percentage
    var progressText = document.getElementById("progress-text");

    // id progress kB/s
    var downloadProgressText = document.getElementById("download-progress-text");

    // request blob object for binary data
    var request = new XMLHttpRequest();
    request.responseType = 'blob';
    request.open('get', FileUrl, true);
    request.send();

    request.onreadystatechange = function() {
        if(this.status == 200) {

            if (this.readyState == 2) {
                console.log("Download started");

            } else if (this.readyState == 4) {
                console.log("Download finished");
                var obj = window.URL.createObjectURL(this.response);
                // ** update hidden <a id="save-file">
                var saveFile = document.getElementById('save-file')
                saveFile.setAttribute('href', FileUrl);
                saveFile.setAttribute('download', FileName);
                saveFile.click();
                // ** free up resources
                setTimeout(function() {
                    window.URL.revokeObjectURL(obj);
                }, 60 * 1000);

            }
        } else {
            console.log("Request not successful.");
        }
    };

    var startTime = new Date().getTime();

    request.onprogress = function(e) {
        // e.total is tital filesize, returns 0 on gzip files
        console.log("In progress: " + e.loaded);
        // ** update progress bar
        progress.max = FileSize;
        progress.value = e.loaded;
        // ** update percentage
        var percent_complete = (e.loaded / FileSize) * 100;
        percent_complete = Math.floor(percent_complete);
        progressText.innerHTML = percent_complete + "%";
        // ** update transfer rate
        var duration = ( new Date().getTime() - startTime ) / 1000;
        var kbps = (e.loaded / duration) / 1024;
        kbps = Math.floor(kbps);
        downloadProgressText.innerHTML = kbps + " kB/s";
    };

});

Update 8 feb. html en javascript aangepast
 

Bijlagen

  • progressbar.zip
    1,6 KB · Weergaven: 11
Laatst bewerkt:
Ik denk dat ik mij dit verhaal té eenvoudig had voorgesteld.
Verder dan de progress bar van deze URL kom ik (nog) niet.
ww.miracom.nl/test/progress/pdf/bestand50mb.pdf";
Klik om te vergroten...
De combinatie van progressbarcode bij om-het-even-welke-downloadfile is blijkbaar ook voor experts geen walk in the park, laat staan voor mij ... in de sneeuw ;-)
Misschien zijn er manieren/methoden om van bij de codering al 'in te grijpen' (sql - tijdens het jaar aanzwellende tabel) om zo een (slot)download van ca een halve minuut drastisch te kunnen reduceren /vermijden ?
 
Laatst bewerkt:
Ik heb een aantal scripts getest en de meeste zijn uitgebreider, bijvoorbeeld met html + Javascript + PHP.
De eenvoudige scripts zijn meestal oudere scripts en die geven een Cors error en werken daarom niet.
Met SQL kan je niets doen om een progress indicatie te maken..

Je kan wel het volgende in de html gebruiken maar dan heb je geen progress indicatie. Meer info hier, bijvoorbeeld
Code: 
<a href="https://www.example.nl/files/mijnbestand.pdf" download="mijnbestand.pdf">PDF downloaden</a>

Met het linkje wat je gaf (miracom.nl/test/progress/pdf/bestand50mb.pdf) open je rechtstreeks de pdf en dan wordt de pdf reader op je pc gebruikt, niet de progress bar in html.
Het eigenlijke script van post #12 staat op www.miracom.nl/test/progress en het werkt in 2 stappen die eventueel samengevoegd kunnen worden.
1. download het bestand met de progress indicatie (extra html en css voor een andere vormgeving).
2. save file : open het venster om het bestand op te slaan (de getoonde naam kan in het script worden goed gezet).

De download snelheid is bij iedereen verschillend en tijdens het downloaden variabel. Het is niet van tevoren bekend wat de download tijd is van een bepaald bestand met een bepaalde bestandsgrootte.
 
Met SQL kan je niets doen om een progress indicatie te maken..
Klik om te vergroten...
Met mijn 'sql-zin' bedoelde ik hier enkel dit : bestaan er in de praktijk soms bepaalde coderingsregeltjes of -normen of -spitsvondigheden ... die (bij selecties in databases) eventueel kunnen helpen om de downloadsnelheid te verminderen (... om zo een progress bar overbodig te maken) ?
 
Laatst bewerkt:
Antwoord op je vraag is nee. De download snelheid wordt niet aan de serverkant bepaald. Wel kan Javascript (in de browser) kleine stukjes van het bestand opvragen waardoor het downloaden langer gaat duren. Hiervoor is een Javascript en PHP script nodig.

#14. De download snelheid is bij iedereen verschillend en tijdens het downloaden variabel. Het is niet van tevoren bekend wat de download tijd is van een bepaald bestand met een bepaalde bestandsgrootte.
Klik om te vergroten...
 
Laatst bewerkt:
Dank bron voor toelichting m.b.t download snelheid.
Terug naar #14 (... voor een werkende progress bar!)

M.b.t.
www.miracom.nl/test/progress
Klik om te vergroten...
zie ik volgende elementen nog niet
=> waar wordt de te downloaden file gewijzigd in dit prog. - bijvoorbeeld naar mijn uit te voeren asp-file (of zijn hiervoor ook codes sub #12 nog te gebruiken) ?
=> kan de uitvoering van de gedownloade asp.file zonder bijkomende handeling - dus onmiddellijk - gebeuren ?
 
Laatst bewerkt door een moderator:
Voorbeeld
Website : https://www.example.nl
Mapje op server : /files/pdf/
Bestandsnaam : informatie.pdf
Precieze bestandsgrootte : 8383194 bytes (voorbeeld bestand informatie.pdf)

Met deze voorbeeld gegevens kan je bij #12 (met progress bar) dit invullen
Code: 
var FileUrl  = "https://www.example.nl/files/pdf/informatie.pdf";
var FileName = "informatie.pdf";
var FileSize = 8383194;

Met deze voorbeeld gegevens kan je bij #14 (zonder progress bar) dit invullen
Code: 
<a href="https://www.example.nl/files/pdf/informatie.pdf" download="informatie.pdf">PDF downloaden</a>

Je 2 vragen: ik kan je niet helpen hoe je dit in asp kan integreren, van asp weet ik niets.
 
Laatst bewerkt:
Update bij #12 waarin de html en javascript zijn opgeschoond en aangepast waar nodig.
Er is nu 1 download knop die bij 100% automatisch het Opslaan Als venster opent.
 
Er loopt blijkbaar nog iets mis ...
Heb de 2 bestanden van #12 (update) gedownload.

Bij uitvoering zie ik een werkende knop 'Download' met daaronder een grijze progress-balk.
Als ik de knop 'Download' indruk zou ik het logo van SIDN moeten zien maar er gebeurt niets.

Heb evenwel net voordien al geprobeerd om de voorbeeldfile informatie.pdf te vervangen door een asp-file (de initiële reden van mijn vraag naar een progress-balk)
en ... er kwam beweging in de progress balk
=> het zeer wispelturig percentage steeg naar meer dan 500 en bleef haperen (had tussendoor wel al een paar keer de Download knop 'beroerd')
=> toch kreeg ik op een bepaald moment de asp-code op het scherm te zien (zoals een pdf) ... in plaats van de uitvoering ervan ?

Heb dan maar de SIDN voorbeeldfile 'hersteld' maar (weer) zonder reactie - cfr. mijn aanhef.

Zit bijgevolg naast bovenstaande haperingen ook met volgend knelpunt : kan de code van een asp-file (idem eventueel voor een php-file) in dit bestek ook uitgevoerd worden ?

Dank bron voor jouw engelengeduld in deze.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan