jQuery Tutorial to Download Multiple ZIP Files at Once on Button Click in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

jQuery plugin for simultaneous downloads

How to add it to your project

With script tag

<script src="jquery.multidownload.js"></script>

with browserify:

Add to your project

  npm install jquery-multidownload

and load with require

global.jQuery = require('jquery')
require('jquery-multidownload')

How to use it

Select links to resources you want to download simultaneously and call multiDownload function:

<a href="document1.zip" class="document">document 1</a>
<a href="document2.zip" class="document">document 2</a>
<a href="document3.zip" class="document">document 3</a>

<a href="#" id="download_all">download all</a>

$('#download_all').click(function (event) {
    event.preventDefault();
    $('.document').multiDownload();
});

Important: All $(‘.my_links’) elements must have defined “href” attribute. “href” must point to documents that generate proper HTML headers (“Content-Disposition: attachment; filename=my_filename”).

Options

Set custom delay between downloads that are triggered (might be useful on IE):

$('.my_download_trigger').multiDownload({ delay: 500 });

 

 

jquery-multidownload.js

 

 

;(function($, window, document, undefined) {
  "use strict"

  var download = function (options) {
    var triggerDelay = (options && options.delay) || 100
    var cleaningDelay = (options && options.cleaningDelay) || 1000

    this.each(function (index, item) {
      createIFrame(item, index * triggerDelay, cleaningDelay)
    })
    return this
  }

  var createIFrame = function (item, triggerDelay, cleaningDelay) {
    setTimeout(function () {
      var frame = $('<iframe style="display: none;" class="multi-download-frame"></iframe>')

      frame.attr('src', $(item).attr('href') || $(item).attr('src'))
      $(item).after(frame)

      setTimeout(function () { frame.remove() }, cleaningDelay)
    }, triggerDelay)
  }

  $.fn.multiDownload = function(options) {
      return download.call(this, options)
  }

})(jQuery, window, document);

 

 

DOWNLOAD FULL SOURCE CODE

Leave a Reply