href image link télécharger on click
Je génère des liens normaux tels que: <a href="/path/to/image"><img src="/path/to/image" /></a> dans une application Web.
Lorsque je clique sur le lien, il affiche l'image dans une nouvelle page. Si vous souhaitez enregistrer la photo, vous devez cliquer dessus avec le bouton droit de la souris et sélectionner "enregistrer sous".
Je ne veux pas de ce comportement, j'aimerais avoir une boîte de téléchargement lorsque je clique sur le lien, est-ce possible uniquement avec HTML ou javascript? Comment?
Sinon, je suppose que je devrais écrire un script download.php et l'appeler dans href avec le nom du fichier comme paramètre ...?
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
<img alt="ImageName" src="/path/to/image">
</a>
Ce n'est pas encore complètement supporté http://caniuse.com/#feat=download, mais vous pouvez utiliser modernizr https://modernizr.com/download/?adownload-setclasses ( sous Non-core détecte ) pour vérifier la prise en charge du navigateur.
Le moyen le plus simple de créer un lien de téléchargement pour une image ou un fichier HTML consiste à définir attribut de téléchargement , mais cette solution ne fonctionne que sur les navigateurs modernes.
<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>
"myimage" est un nom de fichier à télécharger. L'extension sera ajoutée automatiquement Exemple ici
<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');
}
?>
Non ce n'est pas. Vous aurez besoin d'un élément sur le serveur pour envoyer un en-tête Content-Disposition afin de définir le fichier en tant que pièce jointe au lieu d'être intégré. Vous pouvez le faire avec une configuration Apache simple.
J'ai trouvé n exemple de le faire avec mod_rewrite , bien que je sache qu'il existe un moyen plus simple.
Si vous utilisez HTML5, vous pouvez ajouter l'attribut "télécharger" à vos liens.
<a href="/test.pdf" download>
Essaye ça...
<a href="/path/to/image" download>
<img src="/path/to/image" />
</a>
Vous ne pouvez pas le faire avec du HTML pur/javascript. En effet, vous disposez d'une connexion distincte au serveur Web pour récupérer un fichier séparé (l'image) et un serveur Web normal le servira avec les en-têtes de contenu définis de sorte que le navigateur qui lit le type de contenu décide que ce type peut être géré en interne.
Pour forcer le navigateur à ne pas gérer le fichier en interne, vous devez modifier les en-têtes (disposition du contenu ou contenu de préférence) afin que le navigateur n'essaye pas de gérer le fichier en interne. Vous pouvez le faire en écrivant un script sur le serveur Web définissant de manière dynamique les en-têtes (c'est-à-dire download.php) ou en configurant le serveur Web pour renvoyer des en-têtes différents pour le fichier à télécharger. Vous pouvez le faire répertoire par répertoire sur le serveur Web, ce qui vous permettrait de vous échapper sans écrire de php ni de javascript - il vous suffit simplement de placer toutes vos images téléchargées à cet emplacement.
Code simple pour le téléchargement d'image avec une image en utilisant 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>
Téléchargement d'image en utilisant l'image en cliquant!
J'ai fait ce code 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>
Attribut de téléchargement HTML pour spécifier que la cible sera téléchargée lorsqu'un utilisateur clique sur le lien hypertexte.
Cet attribut n'est utilisé que si l'attribut href est défini.
La valeur de l'attribut sera le nom du fichier téléchargé. Il n'y a pas de restrictions sur les valeurs autorisées et le navigateur détectera automatiquement l'extension de fichier correcte et l'ajoutera au fichier (.img, .pdf, .txt, .html, etc.).
Exemple de code:
<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>
HTML5:
<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>
Sortie :
Téléchargement HTML5 ou chrome