View Full Version : Html5 Downloadable file

01-28-2012, 01:53 AM
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.

01-28-2012, 02:16 AM
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>

01-28-2012, 03:09 PM
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!

01-28-2012, 05:39 PM
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.

01-29-2012, 01:21 AM
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:

Content-Disposition: attachment; filename=fname.ext

However, you really should let the user choose to do this themselves.

01-29-2012, 11:26 AM
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:

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:

<a download href="image.png">Download Image</a>

So far, this feature is only supported in Chrome 14+.