Clever Geek Handbook

Initiate image loading with jQuery

I want my users to be able to download images from my site using jQuery. For example, I have an image like this below on my website. When the user clicks the "Upload" button, the image must be uploaded to the user's system. What can I do for 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.

+1


source to share


3 answers


On the server side, you can route the image to a PHP page that will force the download.

In your HTML page, you should:

If the file is PNG

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



or if the file is JPG

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

Then 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);

?>
+3


source


PHP code:



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


source


You cannot do this reliably without PHP. I found a previous question on this website that can help you with this: Force image download using Javascript

There is actually a method that relies on HTML5 out there, but I'm not entirely sure if you could take it as reliable.

0


source






More articles:


All Articles