href image link descargar al hacer clic


Genero enlaces normales como: <a href="/path/to/image"><img src="/path/to/image" /></a> en una aplicación web.

Cuando hago clic en el enlace, muestra la imagen en una nueva página. Si desea guardar la imagen, debe hacer clic derecho sobre ella y seleccionar "guardar como"

No quiero este comportamiento, me gustaría tener un cuadro de descarga emergente cuando hago clic en el enlace, ¿es posible solo con html o javascript? ¿Cómo?

Si no, supongo que tendría que escribir una descarga.script php y llamarlo en el href con el nombre de archivo como parámetro...?

Author: bstpierre, 2010-03-09

10 answers

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

Todavía no es totalmente compatible http://caniuse.com/#feat=download, pero se puede utilizar con modernizr https://modernizr.com/download/?adownload-setclasses (en Non-core detecta ) para comprobar el soporte del navegador.

 198
Author: Francisco Tomé Costa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-02 13:14:26

La forma más fácil de crear un enlace de descarga para imagen o html es establecer atributo de descarga, pero esta solución solo funciona en navegadores modernos.

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

"myimage" es un nombre de archivo para descargar. La extensión se añadirá automáticamente Ejemplo aquí

 50
Author: Aleksey Saatchi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-28 17:20:01
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

Descargar.php:

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>
 45
Author: amir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-30 12:41:20

No, no lo es. Necesitará algo en el servidor para enviar un encabezado Content-Disposition para establecer el archivo como adjunto en lugar de estar en línea. Sin embargo, podría hacer esto con una configuración simple de Apache.

He encontrado un ejemplo de hacerlo usando mod_rewrite, aunque sé que hay una forma más simple.

 10
Author: Quentin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-03-09 10:15:27

Prueba esto...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
 6
Author: edCoder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-31 11:19:20

Si está utilizando HTML5, puede agregar el atributo 'download' a sus enlaces.

<a href="/test.pdf" download>

Http://www.w3schools.com/tags/att_a_download.asp

 5
Author: Jijo Paulose,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-20 11:42:24

No puedes hacerlo con html/javascript puro. Esto se debe a que tiene una conexión separada con el servidor web para recuperar un archivo separado (la imagen) y un servidor web normal servirá el archivo con encabezados de contenido configurados para que el navegador que lea el tipo de contenido decida que el tipo se puede manejar internamente.

La forma de forzar al navegador a no manejar el archivo internamente es cambiar las cabeceras (content-disposition prefereably, o content-type) para que el navegador no intente para manejar el archivo internamente. Puede hacer esto escribiendo un script en el servidor web que establezca dinámicamente los encabezados (es decir, descargar.php) o configurando el servidor web para que devuelva diferentes encabezados para el archivo que desea descargar. Puede hacer esto por directorio en el servidor web, lo que le permitiría escapar sin escribir php o javascript, simplemente tenga todas sus imágenes de descarga en esa ubicación.

 3
Author: Colin Pickard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-03 13:42:02

Código simple para descargar una imagen haciendo clic en una imagen usando php

<html>
<head>
    <title> Download-Button </title>
</head>
<body>
    <p> Click the image ! You can download! </p>
    <?php
    $image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
    //echo $image;
    ?>
    <a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
        <img alt="logo" src="http://localhost/sc/img/logo.png">
    </a>
</body>

 3
Author: Sashtha Manik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-02 13:08:03

Descarga de imágenes con el uso de la imagen haciendo clic!

Hice este simple código!:)

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>
 1
Author: Sashtha Manik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-02 10:51:28

Hay 2 formas simples de evitar abrir cualquier archivo en lugar de descargarlo. 1.) Una solución simple, que es a prueba de balas, es cambiar el nombre de la extensión de la imagen a algo que un navegador no entiende, como myimage.zzz Sin embargo, debes decirle a tu visitante que cambie la extensión después de la descarga. Tal vez no tan práctico. 2.) Poner la imagen en un zip, por lo general lo hago con archivos que no quiero haber abierto inmediatamente.

Las etiquetas de descarga no funcionan para safari o iExplorer. Espero que eso ayude.

 -3
Author: Rudolf B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-25 15:40:58