2

So I wrote an image gallery with an option to download the original image (by default, it displays a resized version of the image). I would love to know how to I

The following code will force users to save pdf rather than viewing it with browser, I would love to achieve the same effect for the images (jpg, gif, png) by binding the click action with jQuery, how will I be able to do that?

Taken from php.net

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

// The PDF source is in original.pdf
readfile('original.pdf');
?>

html:

<div class="download">
<a href="http://www.xyz/abc.jpg">
    Download original image</a>
</div>

js:

$(".download").click(function(){
  // call a php to download the image
});

Is it possible to do so?

Edit: What should I do in javascript code?

John
  • 221
  • 1
  • 5
  • 14

3 Answers3

3

It's possible. The server (PHP script) needs to send the Content-Disposition header as show in your first snippet. For example:

header('Content-Disposition: attachment; filename="abc.jpg"');
mopoke
  • 10,555
  • 1
  • 31
  • 31
  • Thanks for your quick response. I have just updated my question. I want to know about the javascript code, not PHP. – John Dec 22 '09 at 03:36
  • If you're calling a PHP page to actually serve the image, what's wrong with doing it in PHP? – Anon. Dec 22 '09 at 03:37
  • But this fails on IE when you have special characters in the filename. And @Alix Axel: WTF are you beefing about? – Frunsi Dec 22 '09 at 04:02
  • @Alon: I am asking how to trigger the php code with the click event in jquery. @Alix: If you don't understand what my question is, I am sorry that perhaps I should be more clear. And I would please request ask more question for clarification, this is the way to learn and your guess is not helpful to anyone. This is place to learn, to share and not a place to show case your guess ability. – John Dec 22 '09 at 04:02
2

It is possible, but IE (what a surprise...) has a subtle bug:

<?php
header( 'Content-Type: ' . $your_content_type . '; charset=UTF-8' );
if( strpos($_SERVER['HTTP_USER_AGENT'],'MSIE') !== false ) header( 'Content-Disposition: attachment; filename="'.rawurlencode($your_filename).'"' );
else header( 'Content-Disposition: attachment; filename="'.addslashes($your_filename).'"' );
?>

EDIT: There is nothing more to do in javascript! Just let the user click the URL to the image, or just add a click handler, that sends the browser to the image URL! On client/browser-side you just cannot decide whether an URL should be downloaded or be displayed!

Frunsi
  • 7,099
  • 5
  • 36
  • 42
1

Generally the decision to display or download is made by the browser based on the MIME type. So I think this is what you want:

If you just want to force a download use the header() function to set the Content-type to be application/octet-stream.

Internet Explorer's MIME-type support is broken, so it does not react to the above. However, if you in addition use the Content-Disposition header you can also force MSIE 5 to download the file.

This header also allows you to specify a filename. This works in both Netscape and MSIE 5.

header("Content-Disposition: attachment; filename=\"myfile.abc\"");

Edit: here's some interesting info, though it may not be relevant to your specific use-case:

This problem occurs if the following conditions are true:

The file name in the content disposition header uses double-byte character set (DBCS) characters, such as Japanese characters. The second byte, or "trailbyte," of any of the DBCS characters contains values that represent file system-reserved characters in ASCII. For example, the "trailbyte" contains values that represent ASCII values such as 0x5c or 0x7c.

Edit 2: If you're only interested in doing this on the client, that was answered here: Force Mime Type in Browser (with Javascript)

Community
  • 1
  • 1
danben
  • 80,905
  • 18
  • 123
  • 145