클릭시 href 이미지 링크 다운로드
<a href="/path/to/image"><img src="/path/to/image" /></a>웹 앱에서 와 같은 일반 링크를 생성 합니다.
링크를 클릭하면 새 페이지에 사진이 표시됩니다. 사진을 저장하려면 사진을 마우스 오른쪽 버튼으로 클릭하고 "다른 이름으로 저장"을 선택해야합니다.
나는이 행동을 원하지 않는다. 링크를 클릭 할 때 다운로드 상자가 나타나기를 원한다 .html 또는 javascript로 가능합니까? 어떻게?
그렇지 않다면 download.php 스크립트를 작성하고 파일 이름을 매개 변수로 href로 호출해야한다고 생각합니까?
<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 ) 와 함께 사용 하여 지원 여부를 확인할 수 있습니다 브라우저.
이미지 또는 HTML에 대한 다운로드 링크를 작성하는 가장 쉬운 방법은 다운로드 속성을 설정하는 것이지만이 솔루션은 최신 브라우저에서만 작동합니다.
<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>
"myimage"는 다운로드 할 파일의 이름입니다. 확장 프로그램이 자동으로 추가됩니다. 여기 예
<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');
}
?>
아닙니다. 파일을 인라인 대신 첨부 파일로 설정하기 위해 Content-Disposition 헤더를 보내려면 서버에 무언가가 필요합니다. 그러나 일반 Apache 구성 으로이 작업을 수행 할 수 있습니다.
더 간단한 방법이 있다는 것을 알고 있지만 mod_rewrite 사용하여 예제를 찾았 습니다.
HTML5를 사용하는 경우 '다운로드'속성을 링크에 추가 할 수 있습니다.
<a href="/test.pdf" download>
http://www.w3schools.com/tags/att_a_download.asp
이 시도...
<a href="/path/to/image" download>
<img src="/path/to/image" />
</a>
You can't do it with pure html/javascript. This is because you have a seperate connection to the webserver to retrieve a separate file (the image) and a normal webserver will serve the file with content headers set so that the browser reading the content type will decide that the type can be handled internally.
The way to force the browser not to handle the file internally is to change the headers (content-disposition prefereably, or content-type) so the browser will not try to handle the file internally. You can either do this by writing a script on the webserver that dynamically sets the headers (i.e. download.php) or by configuring the webserver to return different headers for the file you want to download. You can do this on a per-directory basis on the webserver, which would allow you to get away without writing any php or javascript - simply have all your download images in that one location.
Simple Code for image download with an image clicking using 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>
Image download with using image clicking!
I did this simple code!:)
<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>
HTML download attribute to specify that the target will be downloaded when a user clicks on the hyperlink.
This attribute is only used if the href attribute is set.
The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
Example code:
<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>
Output:
Html5 download or chrome
참고URL : https://stackoverflow.com/questions/2408146/href-image-link-download-on-click
'development' 카테고리의 다른 글
| Ruby 배열을 X 요소의 일부로 나누는 방법은 무엇입니까? (0) | 2020.05.29 |
|---|---|
| jQuery를 사용하여 iPad 사용자를 감지 하시겠습니까? (0) | 2020.05.29 |
| datetime2 데이터 유형을 datetime 데이터 유형으로 변환하면 범위를 벗어난 값이 발생했습니다. (0) | 2020.05.29 |
| 문자 수를 10으로 제한하는 정규식 (0) | 2020.05.29 |
| Bash 스크립트에 전달 된 인수 수를 어떻게 찾습니까? (0) | 2020.05.29 |