Saya menghasilkan tautan normal seperti: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>di aplikasi web.

Ketika saya mengklik tautan, itu menampilkan gambar di halaman baru. Jika Anda ingin menyimpan gambar, maka Anda perlu mengklik kanan padanya dan pilih "save as"

Saya tidak ingin perilaku ini, saya ingin kotak unduhan muncul ketika saya mengklik tautan, apakah itu mungkin hanya dengan html atau javascript? Bagaimana?

Jika tidak, saya rasa saya harus menulis skrip download.php dan memanggilnya ke href dengan nama file sebagai parameter ...?

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

Ini belum sepenuhnya didukung http://caniuse.com/#feat=download , tetapi Anda dapat menggunakan dengan modernizr https://modernizr.com/download/?adownload-setclasses (di bawah Non-core detects ) untuk memeriksa dukungan dari browser.

Cara termudah untuk membuat tautan unduhan untuk gambar atau html adalah menyetel atribut unduhan , tetapi solusi ini hanya berfungsi di peramban modern.

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

"myimage" adalah nama file untuk diunduh. Ekstensi akan ditambahkan secara otomatis Contoh di sini

<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

unduh.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');

}
?>

Tidak. Anda akan memerlukan sesuatu di server untuk mengirim header Content-Disposition untuk mengatur file sebagai lampiran alih-alih sejajar. Anda dapat melakukan ini dengan konfigurasi Apache biasa.

Saya telah menemukan contoh melakukannya menggunakan mod_rewrite , meskipun saya tahu ada cara yang lebih sederhana.

Jika Anda Menggunakan HTML5, Anda dapat menambahkan atribut 'unduh' ke tautan Anda.

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

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

Coba ini...

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

Atribut unduhan HTML untuk menentukan bahwa target akan diunduh ketika pengguna mengklik hyperlink.

Atribut ini hanya digunakan jika atribut href diatur.

Nilai atribut akan menjadi nama file yang diunduh. Tidak ada batasan pada nilai yang diizinkan, dan browser akan secara otomatis mendeteksi ekstensi file yang benar dan menambahkannya ke file (.img, .pdf, .txt, .html, dll.).

Kode contoh:

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

Output :

Unduh Gambar >>

Unduhan HTML5 atau chrome

Unduh Gambar >>

Anda tidak dapat melakukannya dengan html / javascript murni. Ini karena Anda memiliki koneksi terpisah ke server web untuk mengambil file terpisah (gambar) dan server web normal akan melayani file dengan header konten diatur sehingga browser yang membaca jenis konten akan memutuskan bahwa jenisnya dapat ditangani secara internal.

Cara untuk memaksa browser untuk tidak menangani file secara internal adalah dengan mengubah header (disposisi konten lebih disukai, atau tipe konten) sehingga browser tidak akan mencoba untuk menangani file secara internal. Anda dapat melakukan ini dengan menulis skrip pada server web yang secara dinamis mengatur header (yaitu download.php) atau dengan mengkonfigurasi server web untuk mengembalikan header yang berbeda untuk file yang ingin Anda unduh. Anda dapat melakukan ini berdasarkan per direktori pada server web, yang akan memungkinkan Anda untuk pergi tanpa menulis php atau javascript - cukup sediakan semua gambar unduhan Anda di satu lokasi itu.

Kode sederhana untuk mengunduh gambar dengan mengklik gambar menggunakan 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>

Unduh gambar dengan menggunakan klik gambar!

Saya melakukan kode sederhana ini! :)

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