Href image link скачать по клику

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

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

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

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

Ответ 1

<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

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

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

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

Ответ 3

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

}
?>

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

Есть два простых способа избежать открытия файла вместо загрузки. 1.) Простым решением, которое является пуленепробиваемым, является изменение имени расширения изображения на то, что браузер не понимает, например myimage.zzz Однако вам нужно сообщить посетителю об изменении расширения после загрузки. Возможно, это не так. 2.) Поместите изображение в zip, я обычно делаю это с файлами, которые я не хочу открывать немедленно.

Теги загрузки не работают для сафари или IExplorer. Надеюсь, что это поможет?