Ссылка на изображение href скачать по клику - PullRequest
Новая
       37

Ссылка на изображение href скачать по клику

164 голосов
/ 09 марта 2010

Я генерирую нормальные ссылки, такие как: <a href="/path/to/image"><img src="/path/to/image" /></a> в веб-приложении.

Когда я нажимаю на ссылку, изображение отображается на новой странице. Если вы хотите сохранить изображение, вам нужно щелкнуть на нем правой кнопкой мыши и выбрать «сохранить как»

Мне не нужно такое поведение, я хотел бы, чтобы при нажатии на ссылку появлялось окно загрузки, возможно ли это только с помощью html или javascript? Как?

Если нет, думаю, мне придется написать скрипт download.php и вызвать его в href с именем файла в качестве параметра ...?

Ответы [ 10 ]

219 голосов
/ 30 апреля 2013 
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

Это еще не полностью поддерживается http://caniuse.com/#feat=download,, но вы можете использовать с modernizr https://modernizr.com/download/?adownload-setclasses ( в разделе Неосновные обнаружения ) для проверки поддержки браузер.

54 голосов
/ 28 января 2013

Самый простой способ создать ссылку для загрузки изображения или HTML - это установить атрибут загрузки , но это решение работает только в современных браузерах. 

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

"myimage" - это имя файла для загрузки. Расширение будет добавлено автоматически Пример здесь

46 голосов
/ 30 августа 2011 
<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');

}
?>
10 голосов
/ 09 марта 2010

Нет, это не так. Вам понадобится что-то на сервере, чтобы отправить заголовок Content-Disposition, чтобы файл был вложенным, а не встроенным. Вы можете сделать это с простой конфигурацией Apache, хотя.

Я нашел пример того, как это делается с помощью mod_rewrite , хотя я знаю, что есть более простой способ.

7 голосов
/ 20 января 2016

Если вы используете HTML5, вы можете добавить атрибут «скачать» к своим ссылкам. 

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

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

6 голосов
/ 31 июля 2015

Попробуйте это ... 

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
3 голосов
/ 02 июня 2016

Простой код для загрузки изображения с нажатием изображения с помощью 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>

3 голосов
/ 09 марта 2010

Вы не можете сделать это с чистым html / javascript. Это связано с тем, что у вас есть отдельное подключение к веб-серверу для извлечения отдельного файла (изображения), и обычный веб-сервер будет обслуживать файл с установленными заголовками содержимого, так что браузер, читающий тип содержимого, решит, что тип может обрабатываться внутренне.

Способ заставить браузер не обрабатывать файл внутренне - это изменить заголовки (предпочтительно расположение содержимого или тип содержимого), чтобы браузер не пытался обработать файл внутренне. Вы можете сделать это, написав скрипт на веб-сервере, который динамически устанавливает заголовки (то есть download.php), или настроив веб-сервер так, чтобы он возвращал разные заголовки для файла, который вы хотите загрузить. Вы можете сделать это для каждого каталога на веб-сервере, что позволит вам уйти без написания php или javascript - просто разместите все загружаемые изображения в одном месте.

1 голос
/ 06 марта 2019

Атрибут загрузки HTML, указывающий, что цель будет загружаться, когда пользователь нажимает гиперссылку.

Этот атрибут используется только если установлен атрибут href.

Значением атрибута будет имя загруженного файла. Нет никаких ограничений на допустимые значения, и браузер автоматически определит правильное расширение файла и добавит его в файл (.img, .pdf, .txt, .html и т. Д.).

Пример кода: 

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

выход

Загрузить изображение >>

HTML5 скачать или хром

Загрузить изображение >>

1 голос
/ 02 июня 2016

Загрузка изображения с использованием нажатия изображения!

Я сделал этот простой код! :) 

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