我生成正常的链接,如:<a href="/path/to/image"><img src="/path/to/image" /></a>在web应用程序。
当我点击链接时,它会在一个新页面中显示图片。如果你想保存图片,你需要右键点击它,选择“另存为”
我不希望这种行为,我想有一个下载框弹出时,我点击链接,这是可能的只是与html或javascript?如何?
如果没有,我想我将不得不写一个下载。php脚本,并调用它到href与文件名作为参数…?
我生成正常的链接,如:<a href="/path/to/image"><img src="/path/to/image" /></a>在web应用程序。
当我点击链接时,它会在一个新页面中显示图片。如果你想保存图片,你需要右键点击它,选择“另存为”
我不希望这种行为,我想有一个下载框弹出时,我点击链接,这是可能的只是与html或javascript?如何?
如果没有,我想我将不得不写一个下载。php脚本,并调用它到href与文件名作为参数…?
当前回答
如果你使用HTML5,你可以添加属性“下载”到你的链接。
<a href="/test.pdf" download>
http://www.w3schools.com/tags/att_a_download.asp
其他回答
如果你使用HTML5,你可以添加属性“下载”到你的链接。
<a href="/test.pdf" download>
http://www.w3schools.com/tags/att_a_download.asp
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
<img alt="ImageName" src="/path/to/image">
</a>
caniuse还不完全支持,但可以使用modernizr(在非核心检测下)来检查浏览器的支持。
<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');
}
?>
属性指定当用户单击超链接时将下载目标。
该属性仅在设置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下载或chrome浏览器
下载镜像>>
纯html/javascript是做不到的。这是因为你有一个单独的连接到web服务器来检索一个单独的文件(图像),一个正常的web服务器将提供设置了内容头的文件,以便读取内容类型的浏览器将决定该类型可以在内部处理。
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.