Initiate image download using jQuery

Question

I want my users to be able to download images from my website using jQuery. For example, I have an image like this below on my website. When user clicks "Download" button that image must be downloaded to user system. What can I do to achieve this?

<div class="download"><img src="http://m.com/hello.png"><div>

EDIT : PHP code is also welcome, for example download.php?url=http://m.com/hello.png,

PS: http://m.com/hello.png is an external URL.

As far as I know, its only possible on client side using an IE solution. Otherwise you will have to do it on the serverside — Johan, Jan 24 '13 at 15:06
I found this article on stackoverflow: http://stackoverflow.com/questions/8666381/image-onclick-download-image-javascript-jquery — Yetispapa, Jan 24 '13 at 15:14

adamdehaven · Answer 1 · 2013-01-24T15:30:12.730

3

For server side, you could direct the image click to a PHP page that would force the download.

On your HTML page, you would have:

If PNG file

<a href="download.php?ext=png"><img src="hello.png" /></a>

or if JPG file

<a href="download.php?ext=jpg"><img src="hello.jpg" /></a>

Then a PHP page download.php as shown below

<?php
if($_GET['ext'] == 'png') {
    $ext = 'png';
} elseif($_GET['ext'] == 'jpg') {
    $ext = 'jpg';
}

header('Content-disposition: attachment; filename=Name-of-Image.'.$ext);
header('Content-type: image/'.$ext);
readfile('http://m.com/hello.'.$ext);

?>

edited Jan 24 '13 at 15:30

answered Jan 24 '13 at 15:11

adamdehaven

5,890
10
61
84

i think this code is for internal image..can i know code for external url – Vishnu Simbu Jan 24 '13 at 15:17
Hey thanks its working.how to differentiate between png and jpg image ? – Vishnu Simbu Jan 24 '13 at 15:22
Just change the `png` in the code to `jpg`. Please mark as the correct answer also :) – adamdehaven Jan 24 '13 at 15:23
i mean , single download.php , that detects png or jpg – Vishnu Simbu Jan 24 '13 at 15:25
Updated answer to base file extension on parameter set by HTML link. – adamdehaven Jan 24 '13 at 15:30

score 0 · Answer 2 · answered Jan 24 '13 at 15:09

0

PHP Code:

header('Content-Type: image/png');
header('Content-Disposition: attachment; filename="filename.png"');
readfile('hello.png');

answered Jan 24 '13 at 15:09

Learner

3,904
6
29
44

you mean external image URL? – Learner Jan 24 '13 at 15:11
check this: http://stackoverflow.com/questions/9801471/download-image-from-url-using-php-code – Learner Jan 24 '13 at 15:12
For user system, not to server – Vishnu Simbu Jan 24 '13 at 15:14

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

You will not be able to do it reliably without using PHP. I found a previous question on this website that can assist you with this: Force Download an Image Using Javascript

Actually there is a method that relies on HTML5 in there, but I'm not quite sure you could consider that reliable yet.

edited May 23 '17 at 10:27

Community

1
1

answered Jan 24 '13 at 15:09

kyle.stearns

2,326
21
30

Initiate image download using jQuery

3 Answers3

Linked