Geek Answers Handbook

How to open Save as..dialog when clicking an image?

Here is the code.

When you click on the link, the save dialog in the dialog should open

<a href="http://www.experts-exchange.com/xp/images/newNavLogo.png" target="_new"> <img src="http://www.experts-exchange.com/xp/images/newNavLogo.png" align="left" alt="" /> </a>

How can we achieve this using jQuery or javaScript?

+4
source share
6 answers

What about jDownload ?

An example of use is shown on the main page.

Edit: The link does not work, and there are probably better plugins for this.

Try http://jqueryfiledownload.apphb.com/

+1
source

If you use PHP or any other platform, you can always use the force loading technique.

This can help:

 <?php $file = 'tag_cloud.gif'; if(!file){ // File doesn't exist, output error die('file not found'); }else{ // Set headers header("Cache-Control: public"); header("Content-Description: File Transfer"); header("Content-Disposition: attachment; filename=$file"); header("Content-Type: image/gif"); header("Content-Transfer-Encoding: binary"); // Read the file from disk readfile($file); } ?>

Call the above script as ajax in the image click event.

Greetings

+1
source

Unfortunately, it only works with IE, but not with Firefox.

 </head> <script> function saveImageAs (imgOrURL) { if (typeof imgOrURL == 'object') imgOrURL = imgOrURL.src; window.win = open (imgOrURL); setTimeout('win.document.execCommand("SaveAs")', 500); } </script> <body> <A HREF="javascript: void 0" ONCLICK="saveImageAs(document.anImage); return false" >save image</A> <IMG NAME="anImage" SRC="../apache_pb2.gif"> </body>
0
source

Click to save

 $("#img").click(function() { document.execCommand('SaveAs','1','give img location here'); });

If this does not work, use these jquery plugins for the cross-browser designMode function

http://plugins.jquery.com/project/designMode

0
source 
 function dl(obj){ window.location = obj.src; } <br/> .......... <br/> <img src="http://www.experts-exchange.com/xp/images/newNavLogo.png" align="left" alt="" onClick="dl(this);"/> <br/>

New browsers will stick to the old page if the download redirects.

-1
source

try it

HTML:

 <img src="http://www.experts-exchange.com/xp/images/newNavLogo.png" align="left" alt="" />

script:

 $('img').each(function(){ $(this).wrap('<a href="'+this.src+'?download=true" target="_blank"/>'); });

Most importantly, you need to specify this on the server side in order to send the file with the attachment of the application when the downlaod = true parameter was added

-1
source

More articles:


All Articles