href 图片链接下载 on click

212
我会生成普通链接,例如:<a href="/path/to/image"><img src="/path/to/image" /></a>在网页应用程序中。当我单击链接时,它会在新页面中显示图片。如果您想保存图片,那么您需要右键单击它并选择“另存为”。
我不希望出现这种行为,我希望在单击链接时弹出下载框,这只能通过HTML或JavaScript实现吗?如何实现?
如果不行,我想我必须编写一个download.php脚本,并将其与文件名作为参数一起调用到href中...?

这里有一个使用PHP类的简单方法:http://www.tutorialchip.com/php-download-file-script/ - ven
10个回答

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

目前caniuse还未完全支持,但您可以使用modernizr在非核心检测下)来检查浏览器的支持情况。


3
谢谢您的评论,了解到这一点是件好事。虽然您需要使用现代化技术,但我现在在所有项目中都使用它,所以……我将接受您的答案作为新答案。 - Pierre
2
我认为你可能误解了Modernizr在这里的作用。简而言之,它不会添加缺失的功能...请参见此答案:http://stackoverflow.com/questions/18681644/modernizr-a-download-for-download-attribute-does-not-work-in-ie-safari-and-and - bravokiloecho
1
@GauravManral:正如答案中所提到的,IE不支持它。请查看提供的caniuse链接。 - peirix
46
重要提示:download 属性仅适用于同源URLMDN文档 - cespon
2
不同的来源怎么办?它只是打开图片而没有下载。有解决办法吗? - Minhaz
显示剩余5条评论

68

创建图像或HTML下载链接最简单的方法是设置下载属性,但这种解决方案仅适用于现代浏览器。

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

"myimage"是一个要下载的文件名。扩展名会自动添加 这里有一个示例


这个能用于Windows消息框吗?我尝试了,似乎不起作用,但也许是我做错了什么?! - Z77

47
<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
存在一个安全问题,应该关闭"application/force-download" Content-Type!它可以下载任何东西,包括服务器 PHP 源代码! - CharlesB
3
@CharlesB说得对,这将允许您使用目录遍历从服务器下载任何内容:例如<a href="download.php?file=../dbparams.inc>">Download</a>。更多信息请参见这里:http://en.wikipedia.org/wiki/Directory_traversal_attack。 - OrganicPanda
有没有人愿意建议对上述代码进行更改以消除安全问题?也许将默认的$ctype设置为null? - InanisAtheos
3
为了解决安全问题,请勿从请求中获取绝对或相对路径信息;只需获取文件名。可以通过去除路径来实现,例如使用 $file = pathInfo($_GET['file'],然后通过将一些已知路径与 $file['basename'] 相连接来组合路径。如果您需要从不同的文件夹提供文件,请在您的请求中使用路径标记,然后将其映射到下载函数中的实际路径。 - Alexander233
1
或者创建一个包含Id、Token、Path关系的表格,从URL中获取Token,在数据库中检查Path并返回相应的文件。 这样会更安全,但显然也更加复杂。 - Felype
显示剩余4条评论

13

2
这仅适用于同源URL。 - Crashalot

11

不,不是这样。您需要在服务器上添加一个Content-Disposition头才能将文件设置为附件而非内联。不过,您可以使用纯Apache配置来实现此操作。

我找到了使用mod_rewrite进行操作的示例,尽管我知道存在更简单的方法。


6
嘿,你说:“虽然我知道有更简单的方法”……那一个是?^_^ - Pierre
如果我能找到细节,我会发布它们。我现在找不到它们,并且没有时间进行广泛的搜索。 - Quentin
1
没问题,谢谢你的帮助。我刚刚创建了一个 PHP 页面来生成下载链接... - Pierre

8

试试这个...

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

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下载或Chrome

下载图片 >>


1
嘿,感谢你的回答。有些人已经提出了这个建议,但我认为它仍然没有得到完全支持。另一方面,你的下载链接在我使用的最新版Chrome上无法工作。 - Pierre
嘿,皮埃尔,试试这个<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>下载图片>></a>,谢谢。 - Rizwan
我尝试了你的评论,但它不起作用。 - Ihsan Fajar Ramadhan
5
这对于来源不同的图像无效。 - Crashalot
那不是真正起作用的。 - user151496

4
您无法仅使用HTML/JavaScript完成此操作。这是因为您需要单独连接到Web服务器以检索单独的文件(即图像),而普通的Web服务器将使用设置了内容头的文件提供服务,以便读取内容类型的浏览器将决定可以在内部处理该类型。
强制浏览器不在内部处理文件的方法是更改标头(最好是content-disposition或content-type),以便浏览器不会尝试在内部处理该文件。您可以通过编写在Web服务器上动态设置标头的脚本(即download.php)或通过配置Web服务器返回要下载的文件的不同标头来实现此操作。您可以在Web服务器上按目录进行此操作,这将允许您在不编写任何PHP或JavaScript的情况下仅在一个位置获取所有下载图像。

1
不,欺骗 content-type 并不是实现此目的的唯一方法。可以查看 content-disposition HTTP 响应头。 - Quentin

3

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

1

使用图像点击下载图像!

我写了这个简单的代码!:)

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接