Starting file download with Javascript

Ever wondered how many sites triggers download after a given timeinterval or by pressing a button or clicking a link.
In this tutorial I'm going to show you how to various methods initiate downloads from your website.

1. Simple Old Method :

   This is the simpleset method to start download, just create a <a> and point it to your file location.

    
   <a href="file.ext" > Click Here <a> To Download
   

2. Javascript based download

   We can use a simple javascript to start file download. We will use window.location method to initiate the download.
   HTML code :

    
   <input type="button" value="Download" onClick="download('file.ext')" >
   

   
   JavaScript Code:

    
   <script>
   function download(file)
   {
    window.location=file;
   }
   </script>
   

3. Download using javascript and Iframe

   <iframe id="frame" style="display:none"></iframe>
   <a href="javascript:download('file.ext')">download</a>
   

   <script type="text/javascript">
   function download(path) 
   {
       var ifrm = document.getElementById("frame");
       ifrm.src = path;
   }
   </script>
   

4. Download using Javascript, Iframe and PHP

   Create a Link :

   <iframe id="frame" style="display:none"></iframe>
   <a href="javascript:download('file.ext')">download</a>
   

   Javascript:

   <script type="text/javascript">
   function download(path) 
   {
       var ifrm = document.getElementById(frame);
       ifrm.src = "download.php?path="+path;
   }
   </script>
   

   Code for download.php file :

   <?php 
      header("Content-Type: application/octet-stream");
      header("Content-Disposition: attachment; filename=".$_GET['path']);
      readfile($_GET['path']);
   ?>
   

5. Javascript based download with timer

   Above method can be used to start a javascript based timer and at the end of timer download will start.
   Simply put the code in file and it will start the timer.
   After time is up we can either display link or directly start download.
   You can use all of above method with the timer with few changes. HTML code:

    
   <div id="counter-text"> Please Wait For <span id="counter">  </span> Seconds. 
   </div>
   <a href="javascript:download('file.ext')" style="display:none" id="link"> 
   Click To Download </a>
   

   JavaScript Code:

    
   <script>
   time = 5;
   document.getElementById("counter").innerHTML = time;
   timer = setInterval("count()",1000);
   
   function count()
   {
    if(time == 1)
    {
     //Cleare Timer and remove counter from page
     clearInterval(timer);
     document.getElementById("counter-text").style.display="none";
     //If you want to display link
     document.getElementById("link").style.display="block";
     //Or directly start download
     //download('file.ext');
    }
    else
    {
     time--;
     document.getElementById("counter").innerHTML = time;
    }
   }
   function download(file)
   {
    window.location=file;
   }
   </script>
   

Ads :
Buy Apple Iphone 5, iphone 4S On www.ebay.com
Electronics, Cars, Fashion, Collectibles, Coupons and More Online Shopping | eBay
www.ebay.co.uk | www.ebay.com.my

Related Posts :

• Submitting and Securing the form data with Javascript
• Using HTML5 Web Worker: Introducing Multithreading in JavaScript