클릭시 href 이미지 링크 다운로드

180

<a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>웹 앱에서 와 같은 일반 링크를 생성 합니다.

링크를 클릭하면 새 페이지에 사진이 표시됩니다. 사진을 저장하려면 사진을 마우스 오른쪽 버튼으로 클릭하고 "다른 이름으로 저장"을 선택해야합니다.

나는이 행동을 원하지 않는다. 링크를 클릭 할 때 다운로드 상자가 나타나기를 원한다 .html 또는 javascript로 가능합니까? 어떻게?

그렇지 않다면 download.php 스크립트를 작성하고 파일 이름을 매개 변수로 href로 호출해야한다고 생각합니까?

html  image  download  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 ( Non-core detects ) 와 함께 사용 하여 지원 여부를 확인할 수 있습니다 브라우저.

— 프란시스코 코스타
소스
2
의견을 보내 주셔서 감사합니다. 알아두면 좋습니다. 당신은 modernizr이 필요하지만, 이제는 모든 프로젝트에서 그것을 사용합니다. 나는 당신의 답변을 새로운 답변으로 받아 들일 것입니다
— Pierre
1
나는 당신이 여기서 Modernizr의 역할을 오해했을 것입니다. 요컨대 누락 된 기능을 추가하지 않습니다.이 답변을 참조하십시오 : stackoverflow.com/questions/18681644/…
— bravokiloecho
@GauravManral 문제가 될 이음새는 무엇입니까?
— Francisco Costa
1
@GauravManral : 답변에서 언급했듯이 IE는 그것을 지원하지 않습니다. 제공된 caniuse 링크를보십시오.
— peirix
8
중요 : download속성 속성은 동일한 출처 URL 에서만 작동 합니다 . MDN 문서
— cespon
59

이미지 또는 HTML에 대한 다운로드 링크를 작성하는 가장 쉬운 방법은 다운로드 속성을 설정하는 것이지만이 솔루션은 최신 브라우저에서만 작동합니다.

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

"myimage"는 다운로드 할 파일의 이름입니다. 확장 프로그램이 자동으로 추가됩니다. 여기 예

— 알렉세이 사치
소스
Windows Message Box에서도 작동합니까? 시도했지만 작동하지 않는 것 같지만 뭔가 잘못한 것 같습니다!
— 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을 닫아야합니다! 서버 PHP 소스를 포함하여 무엇이든 다운로드 할 수 있습니다!
— CharlesB
3
@CharlesB가 맞습니다 <a href="download.php?file=../dbparams.inc>">Download</a>. 예를 들어 디렉토리 탐색을 사용하여 서버에서 무엇이든 다운로드 할 수 있습니다 . 자세한 정보는 여기 : en.wikipedia.org/wiki/Directory_traversal_attack
— OrganicPanda
@CharlesB : 그렇다면 가장 안전한 방법은 무엇입니까 ... 틱 된 답변을 제외하고 ??
— HIRA THAKUR
3
보안 문제를 해결하려면 요청에서 절대 또는 상대 경로 정보를 가져 가지 마십시오. 파일 이름 만 얻으십시오. $ file = pathInfo ($ _ GET [ 'file']을 사용하여 경로를 제거한 다음 $ file [ 'basename']으로 알려진 경로를 추가하여 경로를 어셈블하십시오. 다양한 폴더의 파일을 제공해야하는 경우 경로 토큰을 사용하십시오. 귀하의 요청에 따라 다운로드 기능의 실제 경로로 매핑하십시오
— Alexander233
1
또는 ID, 토큰, 경로 관계가있는 테이블을 작성하고 URL에서 토큰을 가져오고 데이터베이스의 경로를 확인한 후 해당 파일을 리턴하십시오. 더 안전 할 것입니다. 그러나 분명히 더 복잡합니다.
— Felype
10

아닙니다. 파일을 인라인 대신 첨부 파일로 설정하기 위해 Content-Disposition 헤더를 보내려면 서버에 무언가가 필요합니다. 그러나 일반 Apache 구성 으로이 작업을 수행 할 수 있습니다.

더 간단한 방법이 있다는 것을 알고 있지만 mod_rewrite 사용하여 예제를 찾았 습니다.

— 쿠엔틴
소스
6
이봐, 당신은 말합니다 : "나는 더 간단한 방법이 있다는 것을 알고 있지만 ..." ^ _ ^
— Pierre
세부 정보를 찾을 수 있으면 게시합니다. 지금은 찾을 수 없으며 광범위한 검색에 전념 할 시간이 없습니다.
— Quentin
1
도와 주셔서 감사합니다. 방금 다운로드를 생성하는 PHP 페이지를 만들었습니다.
— Pierre
7

이 시도...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
— edCoder
소스
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> >> 다운로드 이미지
— Rizo
4

순수한 html / javascript로는 할 수 없습니다. 별도의 파일 (이미지)을 검색하기 위해 웹 서버에 별도로 연결되어 있고 일반 웹 서버가 컨텐츠 헤더를 설정하여 파일을 제공하므로 컨텐츠 유형을 읽는 브라우저가 유형을 내부적으로 처리 할 수 ​​있다고 결정하기 때문입니다.

브라우저가 파일을 내부적으로 처리하지 않도록하는 방법은 브라우저가 파일을 내부적으로 처리하지 않도록 헤더 (컨텐츠 처리, 선호하는 콘텐츠 유형)를 변경하는 것입니다. 웹 서버에서 동적으로 헤더를 설정하는 스크립트 (예 : download.php)를 작성하거나 다운로드하려는 파일에 대해 다른 헤더를 반환하도록 웹 서버를 구성하면됩니다. 웹 서버에서 디렉토리 단위 로이 작업을 수행 할 수 있습니다. PHP 또는 자바 스크립트를 작성하지 않고도 도망 갈 수 있습니다. 다운로드 한 이미지를 모두 한 위치에 두십시오.

— 콜린 피커드
소스
1
아닙니다. content-type에 대해 거짓말하는 것이 이것을 달성하는 유일한 방법은 아닙니다. 컨텐츠 처리 HTTP 응답 헤더를 참조하십시오.
— Quentin
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>
— 사샤 마니 크
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.