html5 – Download file by mobile device

Question:

I have a link, and when I click on that link, it downloads an image. So far so good, but when I access from a mobile device I can't download this file, does anyone have any idea or solution to solve this?

HTML:

<a href="http://mlb-s2-p.mlstatic.com/ipad-mini-apple-16gb-wi-fi-100-original-pronta-entrega-16713-MLB20125338106_072014-F.jpg" download>
    Clique para baixar a imagem
</a>

JSFIDDLE:

http://jsfiddle.net/dv381tga/

Answer:

You can try this, but it doesn't support all browsers:

<a href="/caminho/imagem" download="arquivo-para-baixar.jpg" title="Nome da imagem">
    <img src="/caminho/imagem/arquivo-para-ver.jpg" alt="Nome da imagem">
</a>

Example of use

See which one is supported here: http://caniuse.com/#feat=download .

But you can try using modernizr for that: http://modernizr.com/download/#-a_download

Another way is creating a .htaccess with the following rule:

<Files (arquivo1|arquivo2).jpg>
   ForceType application/octet-stream
   Header set Content-Disposition attachment
</Files>

Model with Fiddle

Scroll to Top