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


180

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

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

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

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


Вот простой способ сделать это с помощью этого класса PHP: tutorialchip.com/php-download-file-script
ven

Ответы:


239
<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разделе Неосновные обнаружения ), чтобы проверить поддержку браузер


2
Спасибо за ваш комментарий, это хорошо знать. Хотя вам нужен modernizr, я теперь использую его во всех своих проектах, так что ... я приму ваш ответ в качестве нового ответа
Пьер

1
Я думаю, что вы, возможно, неправильно поняли роль Модернизра здесь. Короче говоря, это не добавляет отсутствующей функциональности ... см. Этот ответ: stackoverflow.com/questions/18681644/…
bravokiloecho

@GauravManral, какие швы, чтобы быть проблемой?
Франциско Коста

1
@GauravManral: IE не поддерживает это, как упомянуто в ответе. Посмотрите на ссылку caniuse.
Пейрикс

8
ВАЖНО : downloadатрибут attributte работает только для URL одного и того же происхождения . Документы MDN
cespon

60

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

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

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


Будет ли это работать для окна сообщений Windows? Я пытался, кажется, не работает, но, возможно, я сделал что-то не так ?!
Z77

48
<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');

}
?>

17
Возникла проблема с безопасностью, следует закрыть Content-Type "application / force-download"! который может скачать все что угодно, включая серверный источник PHP!
CharlesB

3
@CharlesB прав, это позволит вам загрузить что-нибудь с сервера, используя обратный путь в каталогах: <a href="download.php?file=../dbparams.inc>">Download</a>например. Более подробная информация здесь: en.wikipedia.org/wiki/Directory_traversal_attack
OrganicPanda

@CharlesB: тогда какой самый безопасный способ ... кроме ответа с галочкой ??
HIRA ТАКУР

3
Чтобы обойти проблему безопасности, не берите из запроса информацию об абсолютном или относительном пути; только получить имя файла. Удалите путь, например, используя $ file = pathInfo ($ _ GET ['file'], а затем соберите путь, добавив некоторый известный путь с помощью $ file ['basename']. Если вам нужно предоставить файлы из разных папок, используйте маркеры пути в вашем запросе, который вы затем сопоставляете с фактическим путем в вашей функции загрузки
Alexander233

1
Или создайте таблицу с отношениями Id, Token, Path, получите токен из URL, проверьте путь в базе данных и верните этот файл. Это было бы безопаснее. Но, очевидно, сложнее.
Фелипе

10

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

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


6
Эй, вы говорите: «хотя я знаю, что есть более простой способ» ... какой? ^ _ ^
Пьер

Если бы я мог найти детали, я бы опубликовал их. Я не могу найти их прямо сейчас, и у меня нет времени посвятить обширному поиску.
Квентин,

1
Хорошо, спасибо за вашу помощь. Я только что создал страницу php, которая генерирует загрузку ...
Pierre


7

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

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

5

Атрибут загрузки 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
Эй, спасибо за ответ. Некоторые люди уже предложили это, но я думаю, что это все еще не полностью поддержано. С другой стороны, ваша ссылка на скачивание не работает для меня в Chrome последней
Pierre

Привет, Пьер, попробуй это <a href=" w3schools.com/images/myw3schoolsimage.jpg "download> Загрузить изображение >> </a> спасибо
Ризо

4

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

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


1
Нет. Ложь о типе контента - не единственный способ достичь этого. См. Заголовок ответа HTTP для размещения содержимого.
Квентин,

4

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

2

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

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

<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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.