Je génère des liens normaux comme: <a href="https://stackoverflow.com/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 l'image, vous devez faire un clic droit dessus et sélectionner «enregistrer sous»

Je ne veux pas de ce comportement, j'aimerais qu'une boîte de téléchargement apparaisse 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 le 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 entièrement pris en charge http://caniuse.com/#feat=download , mais vous pouvez l'utiliser avec modernizr https://modernizr.com/download/?adownload-setclasses ( sous Détectes non-core ) pour vérifier la prise en charge de le navigateur.

Le moyen le plus simple de créer un lien de téléchargement pour une image ou un html consiste à définir l' attribut de téléchargement , mais cette solution ne fonctionne que dans 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, ça ne l'est pas. Vous aurez besoin de quelque chose sur le serveur pour envoyer un en-tête Content-Disposition pour définir le fichier en tant que pièce jointe au lieu d'être en ligne. Vous pouvez le faire avec une configuration Apache simple.

J'ai trouvé un exemple de le faire en utilisant 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>

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

Essaye ça...

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

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 aucune restriction 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>

Production :

Télécharger l'image >>

Téléchargement html5 ou chrome

Télécharger l'image >>

Vous ne pouvez pas le faire avec du html / javascript pur. 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 servira le fichier avec des en-têtes de contenu définis afin que le navigateur lisant le type de contenu décide que le type peut être géré en interne.

La façon de forcer le navigateur à ne pas gérer le fichier en interne consiste à modifier les en-têtes (de préférence la disposition du contenu ou le type de contenu) afin que le navigateur n'essaie pas de gérer le fichier en interne. Vous pouvez le faire soit en écrivant un script sur le serveur Web qui définit dynamiquement les en-têtes (par exemple download.php), soit en configurant le serveur Web pour renvoyer différents en-têtes pour le fichier que vous souhaitez télécharger. Vous pouvez le faire sur une base par répertoire sur le serveur Web, ce qui vous permettrait de vous en sortir sans écrire de php ou de javascript - ayez simplement toutes vos images téléchargées à cet endroit.

Code simple pour le téléchargement d'image avec une image en cliquant 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 avec l'utilisation de 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>