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 :

14 comments:

  1. Nice tutorial keep on writing
    jobs in burdwan

    ReplyDelete
  2. 3-method(Download using javascript and Iframe) do`nt work. Pls help

    ReplyDelete
    Replies
    1. Its working , I just checked it on chrome, firefox, and IE. Which browser are you using ? make sure it supports iframe.

      Delete
  3. Where do I put the script element?

    ReplyDelete
  4. pls help me to write a script which can download a web page automatically by setting time

    ReplyDelete
    Replies
    1. downloading a webpage means you want user to be redirected to that page ?
      If yes it use setTimeOut.
      setTimeout(function() { location.href="NEW PAGE"; }, TIME);

      Delete
  5. plz help me to code for download link using which file goes to download folder

    ReplyDelete
    Replies
    1. do you want your javascript to select a folder by default and save file to that folder. If yes that is not possible as you don't know what file structure the operating system your visitor is using and so have no idea where to save to..

      Delete
  6. the html method opens the file and doesnt download .What to do?

    ReplyDelete
  7. Hi,

    The second option "Javascript based download" is not working, when both video and page are in different domain. Can u please check and help?

    ReplyDelete
  8. Nice Blog !
    Facing QuickBooks Support Phone Number New Hampshire Get it resolved by dialling our Qb experts at 1-855-511-6911.

    ReplyDelete

  9. For much more enhanced results and optimized benefits, you can take help from experts making a call at 855-511-6911 Quickbooks Assisted Payroll

    ReplyDelete
  10. Thankyou For infrormative informtion, keep it up and write more informative blog and if face any kind of issue regarding to Quickbooks Enterprise Support Phone Number Washington dont go anywhere just call at +1-855-533-6333.

    ReplyDelete