Progress tag in HTML5 & jQuery for a list of downloaded files

Progress tag in HTML5 & jQuery for a list of downloaded files

Good afternoon, I need to extend a script (which works fine for a single file) for multiple files. Here there is its demo. I need to pass the list of files shown in the attached image (*), to make a preloader that notifies the waiting time for loading the whole page. I'm new in JavaScript and jQuery; I found this resource and I tried to adapt the code in this way but without success:


  1. <script type="text/javascript">
    var progressCode = $('#progressCode');
    var progressContainer = $('#progressContainer');
    function updateCode () {
    progressCode.text(progressContainer.html());
    }
    updateCode();





    var totalBytes = 8856432; // CHANGE ME WITH THE SIZE OF THE RESOURCE
    var req = new XMLHttpRequest();
    var urlList = new Array("source/surface_html/BG_0_colorBinary.bin", "source/surface_html/BG_0_coordBinary.bin", "source/surface_html/BG_0_normalBinary.bin", "source/cartoon_html/BG_0_colorBinary.bin", "source/cartoon_html/BG_0_coordBinary.bin", "source/cartoon_html/BG_0_normalBinary.bin");
    var progress = $('#download');
    progress.attr("max", totalBytes);
    req.addEventListener("progress", function (e) {
    progress.attr("value", e.loaded).text(Math.floor(100*e.loaded/totalBytes)+" %");
    updateCode();
    }, false);
    req.addEventListener("load", function (e) {
    // THE RESOURCE IS LOADED
    progress.replaceWith('Downloaded!');
    updateCode();
    });
    for (var x = 0; x < urlList.length; x++) {
    req.open("GET","urlList[x]",true);
    req.send();
    }
    </script>


















How can I pass that list (for example of six bin files), instead of the one only file (
resource.dat , in the code of that web page):

  1. <script type="text/javascript">
  2. var progressCode = $('#progressCode');
  3. var progressContainer = $('#progressContainer');

  4. function updateCode() {
  5. progressCode.text(progressContainer.html());
  6. }
  7. updateCode();
  8. var totalBytes = 10000000; // CHANGE ME WITH THE SIZE OF THE RESOURCE  
  9. var req = new XMLHttpRequest();
  10. var progress = $('#download');
  11. progress.attr("max", totalBytes);
  12. req.addEventListener("progress", function (e) {
  13. progress.attr("value", e.loaded).text(Math.floor(100 * e.loaded / totalBytes) + " %");
  14. updateCode();
  15. }, false);
  16. req.addEventListener("load", function (e) { // THE RESOURCE IS LOADED  
  17. progress.replaceWith('<span class="downloaded" title="10Mbytes mock file cached!">Downloaded!</span>');
  18. updateCode();
  19. });
  20. req.open("GET", "resource.dat", true);
  21. req.send();
  22. </script>


Many thanks for your help and attention.

Greetings,

Riccardo

(*) Attached image: