When a user clicks on an image on a web page, I'd like to trigger the browser's Save Image dialog and to let the user save the image on their hard drive. Is there a cross-browser way to do this with jQuery/Javascript?
Add a comment
|
5 Answers
Not precisely, but you can do it by hyperlinking to the img file and setting the content-type and content-disposition headers in the server response. Try, e.g., application/x-download, plus the other headers specified here.
4 Comments
scunliffe
as Craig says, just wrap the image with a hyperlink, that points to a file (with the appropriate headers set) to download.
Craig Stuntz
Good clarification; I'll add it to the answer.
Powerlord
I've never heard of application/x-download, but I have heard of application/octet-stream.
Craig Stuntz
From TFA: "[...] to a nonstandard value such as application/x-download. It's very important that this header is something unrecognized by browsers because browsers often try to do something special when they recognize the content type."
The only thing that comes to my mind is the document.execCommand("SaveAs") of Internet Explorer, you can open a window or use a hidden iframe with the url of your image, and then call it...
Check (with IE of course) this example I've done.
answered Dec 30, 2008 at 4:17
Christian C. Salvadó
831k185 gold badges929 silver badges845 bronze badges
Comments
you can create a hidden file-input field and trigger() this one, when you click on your image:
$('.yourImageClass').click(function(){
$('.hiddenInputClass').trigger('click');
})
2 Comments
RationalRabbit
I have looked all over for something simple. This is something I thought about but was unsure how to implement. Than ks @mheg
RationalRabbit
I have to take that back. This creates a file upload, Not as "save-as" download.
I don't imagine so - a lot of the basic browser functionality (eg: Print Preview) isn't available to Javascript.
Comments
I made an extension that does something like this, if anyone here is still interested. It uses an XMLHTTPRequest to grab the object, which in this case is presumed to be an image, then makes an ObjectURL to it, a link to that ObjectUrl, and clicks on the imaginary link.
In your case, you could just change ondragend to onclick and selectively add it to images.
