href link do obrazu do pobrania po kliknięciu

180

Generuję zwykłe linki, takie jak: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>w aplikacji internetowej.

Kiedy klikam link, wyświetla obraz na nowej stronie. Jeśli chcesz zapisać zdjęcie, kliknij je prawym przyciskiem myszy i wybierz „zapisz jako”

Nie chcę tego zachowania, chciałbym, aby po kliknięciu linku wyskakiwało okno pobierania, czy jest to możliwe tylko w przypadku html lub javascript? W jaki sposób?

Jeśli nie, to chyba musiałbym napisać skrypt download.php i wywołać go w href z nazwą pliku jako parametrem ...?

Pierre
źródło
Oto prosty sposób korzystania z tej klasy PHP: tutorialchip.com/php-download-file-script
ven

Odpowiedzi:

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

Nie jest jeszcze w pełni obsługiwana http://caniuse.com/#feat=download , ale możesz użyć z modernizr https://modernizr.com/download/?adownload-setclasses (w sekcji Wykrywania spoza rdzenia ), aby sprawdzić obsługę przeglądarka.

Francisco Costa
źródło
2
Dziękuję za komentarz, dobrze wiedzieć. Chociaż potrzebujesz modernizatora, teraz używam go we wszystkich moich projektach, więc ... przyjmuję twoją odpowiedź jako nową odpowiedź
Pierre
1
Myślę, że mogłeś źle zrozumieć rolę Modernizra tutaj. Krótko mówiąc, nie dodaje funkcji, której brakuje ... zobacz tę odpowiedź: stackoverflow.com/questions/18681644/ ...
bravokiloecho
@GauravManral co wydaje się być problemem?
Francisco Costa
1
@GauravManral: IE go nie obsługuje, jak wspomniano w odpowiedzi. Spójrz na podany link caniuse.
peirix
8
WAŻNE : downloadatrybut atrybutu działa tylko w przypadku adresów URL tego samego pochodzenia . MDN Docs
cespon
59

Najłatwiejszym sposobem utworzenia linku do pobrania obrazu lub html jest ustawienie atrybutu pobierania , ale to rozwiązanie działa tylko w nowoczesnych przeglądarkach.

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

„myimage” to nazwa pliku do pobrania. Rozszerzenie zostanie dodane automatycznie Przykład tutaj

Aleksey Saatchi
źródło
Czy to zadziała w przypadku okna wiadomości systemu Windows? Próbowałem, wygląda na to, że nie działa, ale może zrobiłem coś nie tak ?!
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');

}
?>
Amir
źródło
17
Wystąpił problem z bezpieczeństwem, należy zamknąć „application / force-download” Content-Type! który może pobrać wszystko, w tym źródło PHP serwera!
CharlesB
3
@CharlesB ma rację, pozwoliłoby to na pobranie czegokolwiek z serwera za pomocą przechodzenia przez katalog: <a href="download.php?file=../dbparams.inc>">Download</a>na przykład. Więcej informacji tutaj: en.wikipedia.org/wiki/Directory_traversal_attack
OrganicPanda
@CharlesB: w takim razie jaki jest najbezpieczniejszy sposób ... poza zaznaczoną odpowiedzią?
HIRA THAKUR
3
Aby obejść problem bezpieczeństwa, nie należy pobierać z żądania informacji o ścieżce bezwzględnej ani względnej; pobierz tylko nazwę pliku. Usuń ścieżkę, np. Używając $ file = pathInfo ($ _ GET ['file'], a następnie połącz ścieżkę, dołączając do jakiejś znanej ścieżki $ file ['basename']. Jeśli chcesz dostarczyć pliki z różnych folderów, użyj tokenów ścieżki w żądaniu, które następnie odwzorowujesz na rzeczywistą ścieżkę w funkcji pobierania.
Alexander233,
1
Lub utwórz tabelę z identyfikatorem, tokenem, relacją ścieżki, pobierz token z adresu URL, sprawdź ścieżkę w bazie danych i zwróć ten plik. To byłoby bezpieczniejsze. Ale oczywiście bardziej skomplikowane.
Felype
10

Nie, nie jest. Będziesz potrzebował czegoś na serwerze, aby wysłać nagłówek Content-Disposition, aby ustawić plik jako załącznik zamiast być wbudowanym. Możesz to jednak zrobić ze zwykłą konfiguracją Apache.

Znalazłem przykład robienia tego za pomocą mod_rewrite , chociaż wiem, że jest prostszy sposób.

Quentin
źródło
6
Hej, mówisz: „chociaż wiem, że jest prostszy sposób”… który? ^ _ ^
Pierre
Gdybym mógł znaleźć szczegóły, opublikowałbym je. Nie mogę ich teraz znaleźć i nie mam czasu na szczegółowe poszukiwania.
Quentin,
1
Dzięki za pomoc. Właśnie utworzyłem stronę php, która generuje plik do pobrania ...
Pierre
7

Spróbuj tego...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
edCoder
źródło
5

Atrybut pobierania HTML, aby określić, że cel zostanie pobrany, gdy użytkownik kliknie hiperłącze.

Ten atrybut jest używany tylko wtedy, gdy ustawiono atrybut href.

Wartością atrybutu będzie nazwa pobranego pliku. Nie ma ograniczeń co do dozwolonych wartości, a przeglądarka automatycznie wykryje prawidłowe rozszerzenie pliku i doda je do pliku (.img, .pdf, .txt, .html itp.).

Przykładowy kod:

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

Wyjście :

Pobierz obraz >>

Pobieranie HTML5 lub Chrome

Pobierz obraz >>

Rizo
źródło
1
Hej, dzięki za odpowiedź. Niektórzy już to zaproponowali, ale myślę, że nadal nie jest to w pełni obsługiwane. Z drugiej strony, twój link do pobrania nie działa dla mnie w Chrome w najnowszej wersji
Pierre
Hej Pierre, wypróbuj to <a href=" w3schools.com/images/myw3schoolsimage.jpg "pobierz> Pobierz obraz >> </a> dzięki
Rizo
4

Nie możesz tego zrobić za pomocą czystego html / javascript. Dzieje się tak, ponieważ masz oddzielne połączenie z serwerem WWW w celu pobrania oddzielnego pliku (obrazu), a normalny serwer WWW będzie obsługiwał plik z ustawionymi nagłówkami treści, tak aby przeglądarka odczytująca typ zawartości zdecydowała, że ​​typ ten może być obsługiwany wewnętrznie.

Sposobem na wymuszenie, aby przeglądarka nie obsługiwała pliku wewnętrznie, jest zmiana nagłówków (preferowana dystrybucja treści lub typ zawartości), aby przeglądarka nie próbowała obsługiwać pliku wewnętrznie. Możesz to zrobić, pisząc na serwerze WWW skrypt, który dynamicznie ustawia nagłówki (np. Download.php) lub konfigurując serwer WWW, aby zwracał różne nagłówki dla pliku, który chcesz pobrać. Możesz to zrobić dla każdego katalogu na serwerze internetowym, co pozwoliłoby ci uciec bez pisania jakiegokolwiek php lub javascript - po prostu umieść wszystkie obrazy do pobrania w tej jednej lokalizacji.

Colin Pickard
źródło
1
Nie. Kłamanie na temat rodzaju treści nie jest jedynym sposobem, aby to osiągnąć. Zobacz nagłówek odpowiedzi HTTP dyspozycji zawartości.
Quentin,
4

Prosty kod do pobrania obrazu z kliknięciem obrazu za pomocą 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>
Sashtha Manik
źródło
2

Pobieranie obrazu za pomocą klikania obrazów!

Zrobiłem ten prosty kod! :)

<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>
Sashtha Manik
źródło