Sunday, 19 May 2013

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 :