Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    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
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •