Tôi tạo các liên kết bình thường như: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>trong một ứng dụng web.

Khi tôi nhấp vào liên kết, nó sẽ hiển thị hình ảnh trong một trang mới. Nếu bạn muốn lưu ảnh, thì bạn cần nhấp chuột phải vào nó và chọn "lưu dưới dạng"

Tôi không muốn hành vi này, tôi muốn có một hộp tải xuống bật ra khi tôi nhấp vào liên kết, điều đó có thể chỉ với html hoặc javascript không? Làm sao?

Nếu không tôi đoán tôi sẽ phải viết một tập lệnh download.php và gọi nó vào href với tên tệp là tham số ...?

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

Nó chưa được hỗ trợ đầy đủ http://caniuse.com/#feat=doad , nhưng bạn có thể sử dụng với Modernizr https://modernizr.com/doad/?adoad-setgroupes ( trong mục Phát hiện không cốt lõi ) để kiểm tra sự hỗ trợ của Trình duyệt.

Cách dễ nhất để tạo liên kết tải xuống cho hình ảnh hoặc html là đặt thuộc tính tải xuống , nhưng giải pháp này chỉ hoạt động trong các trình duyệt hiện đại.

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

"Myimage" là tên của tệp cần tải xuống. Tiện ích mở rộng sẽ được thêm tự động Ví dụ tại đây

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

tải về.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');

}
?>

Không, không phải vậy. Bạn sẽ cần một cái gì đó trên máy chủ để gửi tiêu đề Xử lý nội dung để đặt tệp dưới dạng tệp đính kèm thay vì là nội tuyến. Bạn có thể làm điều này với cấu hình Apache đơn giản.

Tôi đã tìm thấy một ví dụ về việc thực hiện bằng mod_rewrite , mặc dù tôi biết có một cách đơn giản hơn.

Nếu bạn đang sử dụng HTML5, bạn có thể thêm thuộc tính 'tải xuống' vào các liên kết của mình.

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

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

Thử cái này...

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

Thuộc tính tải xuống HTML để chỉ định rằng mục tiêu sẽ được tải xuống khi người dùng nhấp vào siêu liên kết.

Thuộc tính này chỉ được sử dụng nếu thuộc tính href được đặt.

Giá trị của thuộc tính sẽ là tên của tệp đã tải xuống. Không có giới hạn đối với các giá trị được phép và trình duyệt sẽ tự động phát hiện phần mở rộng tệp chính xác và thêm nó vào tệp (.img, .pdf, .txt, .html, v.v.).

Mã ví dụ:

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

Đầu ra :

Tải hình ảnh >>

Tải xuống Html5 hoặc chrome

Tải hình ảnh >>

Bạn không thể làm điều đó với html / javascript thuần túy. Điều này là do bạn có kết nối riêng với máy chủ web để truy xuất một tệp riêng (hình ảnh) và một máy chủ web bình thường sẽ phân phát tệp với các tiêu đề nội dung để trình duyệt đọc loại nội dung sẽ quyết định loại có thể được xử lý bên trong.

Cách để buộc trình duyệt không xử lý tệp bên trong là thay đổi các tiêu đề (tốt nhất là xử lý nội dung hoặc loại nội dung) để trình duyệt sẽ không cố gắng xử lý tệp bên trong. Bạn có thể thực hiện việc này bằng cách viết một tập lệnh trên máy chủ web để tự động đặt các tiêu đề (tức là download.php) hoặc bằng cách định cấu hình máy chủ web để trả về các tiêu đề khác nhau cho tệp bạn muốn tải xuống. Bạn có thể làm điều này trên cơ sở mỗi thư mục trên máy chủ web, điều này sẽ cho phép bạn thoát khỏi mà không cần viết bất kỳ php hoặc javascript nào - chỉ cần có tất cả hình ảnh tải xuống của bạn ở một vị trí đó.

Mã đơn giản để tải xuống hình ảnh với một hình ảnh nhấp bằng 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ải hình ảnh bằng cách sử dụng hình ảnh nhấp chuột!

Tôi đã làm mã đơn giản này! :)

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