Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-28-2012, 12:53 AM   PM User | #1
Dravener
New to the CF scene

 
Join Date: Jan 2012
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Dravener is an unknown quantity at this point
Question Html5 Downloadable file

Hello ,
I want create a test web page but i have stuck on something. At my web page i want to place a link button so that when a user visits my web page and clicks the button , will be able to download an image. I know how to create a link (<a href="pathname">Text</a>) but it just show the image. I want an image,file w/e to be downloaded when the button is clicked. How do i do that help please! Appreciate your help.
Dravener is offline   Reply With Quote
Old 01-28-2012, 01:16 AM   PM User | #2
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Hello Dravener,
Do you mean like this -
<a href="path/to/large.jpg"><img src="path/to/thumbnail.JPG" alt="description" width="300" height="150" /></a>
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 01-28-2012, 02:09 PM   PM User | #3
Dravener
New to the CF scene

 
Join Date: Jan 2012
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Dravener is an unknown quantity at this point
Sorry my mistake..
What i really meant was that when a user clicks the button , it would appear a window saying save or save as.The user then choose to save it anywhere he wants to or a default place. Like we do in other web pages when we press a download button.Hope you get what i mean.Sorry for this my english are not so good... Appreciate your help!
Dravener is offline   Reply With Quote
Old 01-28-2012, 04:39 PM   PM User | #4
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
A downloaded image is displayed by the browser. To save it to their local hard drive the end user/viewer would need to right click on the image.

A file that uses this same code
<a href="path/to/zipfile.zip"><img src="path/to/thumbnail.JPG" alt="description" width="300" height="150" /></a>
would get the save or save as box.

One option to make your image a downloadable file might be to zip it.
I'm sure someone here can also come .php that could be applied to the directory on your server that holds the images.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 01-29-2012, 12:21 AM   PM User | #5
Apostropartheid
The Apostate


 
Apostropartheid's Avatar
 
Join Date: Oct 2007
Posts: 3,215
Thanks: 16
Thanked 265 Times in 263 Posts
Apostropartheid is on a distinguished road
You can force a Save As dialogue by adding the Content-Disposition header (I'll let you look up how to add HTTP headers to files yourself.)

The format is:
Code:
Content-Disposition: attachment; filename=fname.ext
However, you really should let the user choose to do this themselves.
__________________
Blog | Twitter
Useful links: W3C HTML Validator | W3C CSS Validator | HTML 5 Guide
CF: HTML & CSS Resources/Tutorials Thread | HTML & CSS Posting Rules and Guidelines
Remember: no link, no code, no help!
Apostropartheid is offline   Reply With Quote
Old 01-29-2012, 10:26 AM   PM User | #6
Arbitrator
Senior Coder

 
Arbitrator's Avatar
 
Join Date: Mar 2006
Location: Splendora, Texas, United States of America
Posts: 2,895
Thanks: 5
Thanked 187 Times in 184 Posts
Arbitrator is on a distinguished road
Quote:
Originally Posted by Dravener View Post
I want an image,file w/e to be downloaded when the button is clicked.
Since you mentioned "Html5": The HTML5 mechanism for doing this is the download attribute:

Quote:
Originally Posted by WHATWG HTML
The download attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. The attribute may have a value; the value, if any, specifies the default filename that the author recommends for use in labeling the resource in a local file system. There are no restrictions on allowed values, but authors are cautioned that most file systems have limitations with regard to what punctuation is supported in file names, and user agents are likely to adjust file names accordingly.
Assuming that you don't want to specify a custom download file name, your code might look like:

Code:
<a download href="image.png">Download Image</a>
So far, this feature is only supported in Chrome 14+.

References
__________________
Please for the love of god stop making IE. You current "browser"s cause me to cry every day. —Phil *
Arbitrator is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:50 AM.


Advertisement
Log in to turn off these ads.