Force browser to download an image on click of a link using jquery

Question

I would like to start download of an image on click of a link.

<a id="downloadImage" href="imagepath">Click here to download</a>

I know we can use download attribute of HTML5 (Force a browser to save file as after clicking link) but I would not like to use it as it will not be working in older versions of browsers. I did tried the method here: Download File Using Javascript/jQuery but it opens the image in the iframe .

Can anybody help me to force a browser to download an image onclick of a link using jquery?

Answer 1

As far as I know there is no client-side cross-browser solution for this issue (doesn't matter using jQuery or any other UI toolkit). What you need to do in order to trigger browser to download a file is to add some HTTP headers to the server response:

Content-Type: application/octet-stream
Content-Disposition: attachment; filename=image.jpg

This post may also be helpful for you.

Answer 2

You can use the download attribute, while not fully supported across browsers, you can use modernizr to support/fallback for unsupported browsers.

For supported browsers, check http://caniuse.com/#feat=download

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