6

Here is the code.

On click of the link , the save as 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 achive this using jQuery, or javaScript?

Wasim Shaikh
  • 6,880
  • 18
  • 61
  • 88
  • 7
    It's not done on the client side. It's done on the server side with HTTP headers on the target URL. – Asaph Nov 23 '10 at 06:23
  • PHP, for example: http://stackoverflow.com/questions/3718962/force-file-download-in-php or http://stackoverflow.com/questions/3930490/javascript-handling-of-php-readfile-octet-stream – Ben Nov 23 '10 at 06:25

6 Answers6

2

If you are using PHP or any other platform you can always use the force download technique.

This might 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 click event of image.

Cheers

Alfred
  • 21,058
  • 61
  • 167
  • 249
Hasan
  • 33
  • 5
0

Unfortunately, it works only 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>
Ugnius Malūkas
  • 2,649
  • 7
  • 29
  • 42
Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
0

Click to save 

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

If that doesnt works use this jquery plugins for cross browser function "Cross-browser designMode"

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

Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
Mohan Ram
  • 8,345
  • 25
  • 81
  • 130
0

How about jDownload?

Example usage is shown on the main page.

Edit: The link is now down and there are probably now better plugins for this.

Try http://jqueryfiledownload.apphb.com/

Jamie
  • 876
  • 1
  • 10
  • 28
-1
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/>

newer browsers will stick to the old page if a download redirect is made.

Robert Allen
  • 87
  • 7
rbhro
  • 218
  • 1
  • 4
-1

Try this

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 important you need to specify this on server side to send file with disposition attachment when ?downlaod=true was added

mpapis
  • 52,729
  • 14
  • 121
  • 158
  • That won't trigger the SaveAs dialog, and `_new` is just plain wrong. – Quentin Dec 13 '10 at 09:23
  • I updated my answer - removed the wrong new and added a note about server response requirement – mpapis Dec 16 '10 at 08:19
  • I'm curious about the `"most important you need to specify this on server side to send file with disposition attachment when ?downlaod=true was added"` part ;-) – Capsule Apr 11 '11 at 13:14
  • it depends of the server, in rails you could write it like this ` send_file(path, :disposition=>(params[:download]? :attachment : :inline) )` – mpapis Apr 11 '11 at 13:28