CODEWITHSUNDEEP
javascriptjqueryajax
Abdul Rauf
Abdul Rauf

Reputation: 43

directly Download Image by click on Download button

i want to create wallpapers page for my website. and i want people can download by clicking on download button directly rather than image view in browser and user right click on that and then save as image. is there any solution with java script?

Upvotes: 1

Views: 12009

Answers (3)

Jasper
Jasper

Reputation: 76003

You can force a download via a PHP (or other server-side language) script like this:

$file = $_GET['file'];
header('Content-Description: File Transfer');
header("Content-type: application/octet-stream");//notice this content-type, it will force a download since browsers think that's what they should do with .exe files
header("Content-disposition: attachment; filename= ".$file."");
readfile($file);

Then in your JavaScript code you can direct users to this script with the GET variable file being populated by the JavaScript.

$('a.download_link').on('click', function (event) {
    event.preventDefault();//prevent the normal click action from occuring
    window.location = '/path/to/server-side.php?file=' + encodeURIComponent(this.href);
});

This will add a click event handler to any links that have the .download_link class to direct the browser to the PHP script above to force a download.

Upvotes: 2

SliverNinja - MSFT
SliverNinja - MSFT

Reputation: 31641

Just use a hidden iframe that you set the source attribute on when you click the button.

HTML

<input class="download" href="http://site.com/imageHandler.ashx" value="Download"/>

Javascript

$("input.download").click(function() { $("iframeID").attr("src", $(this).attr("href")); });

You also need to set the content-type using the custom image handler (whichever server-side language you are using)

Upvotes: -1

Derp A. Round
Derp A. Round

Reputation: 66

You need to force the content type of the image being sent by the server. There isn't a way to do this client-side.

Content-Type: application/octet-stream
Content-Disposition: attachment;filename=myimage.png

Upvotes: 2

Related Questions