212

I generate normal links like: <a href="/path/to/image"><img src="/path/to/image" /></a> in a web app.

When I click on the link, it displays the picture in a new page. If you want to save the picture, then you need to right click on it and select "save as"

I don't want this behaviour, I would like to have a download box popping out when I click on the link, is that possible just with html or javascript? How?

If not I guess I would have to write a download.php script and call it into the href with the file name as parameter...?

1

10 Answers 10

294
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

It's not yet fully supported caniuse, but you can use with modernizr (under Non-core detects) to check the support of the browser.

9
  • 3
    Thanks for your comment, it's a good thing to know. Although you need modernizr, I now use it in all my projects so... I'll accept your answer as the new answer
    – Pierre
    May 1, 2013 at 12:05
  • 2
    I think you might have misunderstood the role of Modernizr here. In short, it doesn't add functionality that's missing... see this answer: stackoverflow.com/questions/18681644/… Jul 6, 2014 at 11:20
  • 1
    @GauravManral: IE doesn't support it, as mentioned in the answer. Look at the caniuse link provided.
    – peirix
    Jul 6, 2015 at 10:25
  • 46
    IMPORTANT: download attributte attribute only works for same-origin URLs. MDN Docs
    – cespon
    Mar 20, 2019 at 10:47
  • 2
    What about different origins? It's only opening the images but not downloading. Any solution?
    – Minhaz
    Jul 7, 2022 at 4:56
68

The easiest way of creating download link for image or html is setting download attribute, but this solution works in modern browsers only.

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

"myimage" is a name of file to download. Extension will be added automatically Example here

1
  • Will this work for Windows Message Box? I tried, it seems not working, but maybe I did something wrong?!
    – Z77
    Feb 13, 2014 at 13:04
47
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

download.php:

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>
9
  • 17
    There is a security problem, should closed "application/force-download" Content-Type! which can download anything including server PHP source!
    – CharlesB
    May 22, 2012 at 6:28
  • 3
    @CharlesB is right, this would allow you to download anything from the server using directory traversal: <a href="download.php?file=../dbparams.inc>">Download</a> for example. More info here: en.wikipedia.org/wiki/Directory_traversal_attack Aug 10, 2012 at 9:46
  • @CharlesB:then whats the safest way...except the ticked answer?? Aug 14, 2013 at 14:25
  • 3
    To get around the security problem, don't take absolute or relative path information from the request; only get the file name. Strip the path, e.g using $file = pathInfo($_GET['file'] and then assemble the path by appending some known path with $file['basename']. If you need to provide files from various folders, use path tokens in your request, which you then map to the actual path in your download function. Jan 22, 2014 at 17:04
  • 1
    Or create a table with Id, Token, Path relationship, get the token from URL, check the Path in the database and return that file. That would be safer. But obviously more complicated.
    – Felype
    Jun 29, 2015 at 18:13
13

If you are Using HTML5 you can add the attribute 'download' to your links.

<a href="/test.pdf" download>

http://www.w3schools.com/tags/att_a_download.asp

1
  • 2
    this only works for same-origin URLs
    – Crashalot
    Feb 19, 2022 at 8:40
11

No, it isn't. You will need something on the server to send a Content-Disposition header to set the file as an attachment instead of being inline. You could do this with plain Apache configuration though.

I've found an example of doing it using mod_rewrite, although I know there is a simpler way.

3
  • 6
    Hey, you say: "although I know there is a simpler way"... which one? ^_^
    – Pierre
    Mar 9, 2010 at 10:30
  • If I could find the details, I'd post them. I can't find them right now and don't have the time to devote to an extensive search.
    – Quentin
    Mar 9, 2010 at 10:31
  • 1
    It's fine thanks for your help. I just created a php page that generates the download...
    – Pierre
    Mar 9, 2010 at 11:53
8

Try this...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
5

HTML download attribute to specify that the target will be downloaded when a user clicks on the hyperlink.

This attribute is only used if the href attribute is set.

The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).

Example code:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>

HTML5:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>

Output:

Download Image >>

Html5 download or chrome

Download Image >>

5
  • 1
    Hey, thanks for the answer. Some people already proposed this but I think it's still not fully supported. On the other hand, your download link is not working for me on Chrome latest
    – Pierre
    Mar 7, 2019 at 14:34
  • Hey Pierre, try this <a href="w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a> thanks
    – Rizwan
    Mar 8, 2019 at 12:58
  • I tried your comment, but it does not work Jan 19, 2022 at 9:29
  • 5
    This doesn't work for images of different origins
    – Crashalot
    Feb 19, 2022 at 8:40
  • that's not really working
    – user151496
    Mar 7, 2022 at 9:22
4

You can't do it with pure html/javascript. This is because you have a seperate connection to the webserver to retrieve a separate file (the image) and a normal webserver will serve the file with content headers set so that the browser reading the content type will decide that the type can be handled internally.

The way to force the browser not to handle the file internally is to change the headers (content-disposition prefereably, or content-type) so the browser will not try to handle the file internally. You can either do this by writing a script on the webserver that dynamically sets the headers (i.e. download.php) or by configuring the webserver to return different headers for the file you want to download. You can do this on a per-directory basis on the webserver, which would allow you to get away without writing any php or javascript - simply have all your download images in that one location.

1
  • 1
    No. Lying about the content-type is not the only way to achieve this. See the content-disposition HTTP response header.
    – Quentin
    Mar 9, 2010 at 10:29
3

Simple Code for image download with an image clicking using php

<html>
<head>
    <title> Download-Button </title>
</head>
<body>
    <p> Click the image ! You can download! </p>
    <?php
    $image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
    //echo $image;
    ?>
    <a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
        <img alt="logo" src="http://localhost/sc/img/logo.png">
    </a>
</body>
1

Image download with using image clicking!

I did this simple code!:)

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.