página - href html ejemplos
descarga de enlace de imagen href al hacer clic (10)
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 página nueva. 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 apareciendo cuando hago clic en el enlace, ¿es posible solo con html o javascript? ¿Cómo?
Si no, supongo que tendré que escribir un script download.php y llamarlo al href con el nombre del archivo como parámetro ...?
Código simple para la descarga de imágenes con una imagen haciendo clic en 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>
Descarga de imagen con el uso de la imagen al hacer clic!
¡Hice este código simple! :)
<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>
Hay dos formas simples de evitar abrir cualquier archivo en lugar de descargar. 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 comprende, 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, generalmente hago eso con archivos que no quiero que se abran inmediatamente.
Las etiquetas de descarga no funcionan para Safari o IExplorer. ¿Espero que eso ayude?
La forma más fácil de crear un enlace de descarga para la imagen o html es establecer el atributo de descarga , pero esta solución funciona solo en los 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 agregará automáticamente Ejemplo aquí
No puedes hacerlo con html / javascript puro. Esto se debe a que tiene una conexión separada al 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 puede manejarse internamente.
La forma de forzar al navegador a no manejar el archivo internamente es cambiar los encabezados (disposición de contenido preferiblemente, o tipo de contenido) para que el navegador no intente manejar el archivo internamente. Puede hacer esto escribiendo un script en el servidor web que establece dinámicamente los encabezados (es decir, download.php) o configurando el servidor web para que devuelva diferentes encabezados para el archivo que desea descargar. Puede hacerlo por directorio en el servidor web, lo que le permitiría salir sin escribir ningún php o javascript: simplemente tenga todas sus imágenes de descarga en esa ubicación.
No, no lo es. Necesitará algo en el servidor para enviar un encabezado Content-Disposition para establecer el archivo como un archivo adjunto en lugar de estar en línea. Sin embargo, podrías hacer esto con una sencilla configuración de Apache.
He encontrado un ejemplo de hacerlo usando mod_rewrite , aunque sé que hay una manera más simple.
Prueba esto...
<a href="/path/to/image" download>
<img src="/path/to/image" />
</a>
Si usa HTML5, puede agregar el atributo ''descargar'' a sus enlaces.
<a href="/test.pdf" download>
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
<img alt="ImageName" src="/path/to/image">
</a>
Aún no es totalmente compatible con http://caniuse.com/#feat=download , pero puede utilizarlo con modernizr https://modernizr.com/download/?adownload-setclasses ( en Detecciones no centrales ) para verificar el soporte de el navegador.
<a href="download.php?file=path/<?=$row[''file_name'']?>">Download</a>
download.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'');
}
?>