href图片链接下载点击

I generate normal links like: <a href="/path/to/image"><img src="/path/to/image" /></a> in a web app.

在web应用中，我生成如下普通链接:。

When I click on the link, it displays the picture in a new page. If you want to save the picture, then you need to right click on it and select "save as"

当我点击链接时，它会在一个新页面中显示图片。如果你想保存图片，你需要右键点击并选择"save as"

I don't want this behaviour, I would like to have a download box popping out when I click on the link, is that possible just with html or javascript? How?

我不想要这种行为，我想在点击链接时弹出一个下载框，仅仅使用html或javascript就可以吗?如何?

If not I guess I would have to write a download.php script and call it into the href with the file name as parameter...?

如果没有，我想我得写一个下载。php脚本并将其调用到href中，文件名作为参数…?

10 个解决方案

#1

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

It's not yet fully supported http://caniuse.com/#feat=download, but you can use with modernizr https://modernizr.com/download/?adownload-setclasses (under Non-core detects) to check the support of the browser.

它还没有完全支持http://caniuse.com/#feat=下载，但是你可以使用modernizr https://modernizr.com/download/?adownload-setclass(在非核心检测下)来检查浏览器的支持。

#2

The easiest way of creating download link for image or html is setting download attribute, but this solution works in modern browsers only.

创建图像或html的下载链接最简单的方法是设置下载属性，但是这个解决方案只在现代浏览器中有效。

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

"myimage" is a name of file to download. Extension will be added automatically Example here

“myimage”是要下载的文件的名称。扩展将在这里自动添加示例

#3

<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

---

download.php:

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');

}
?>

#4

No, it isn't. You will need something on the server to send a Content-Disposition header to set the file as an attachment instead of being inline. You could do this with plain Apache configuration though.

不,它不是。您将需要服务器上的一些东西来发送内容配置头，以将文件设置为附件，而不是内联。不过，您可以使用普通的Apache配置来实现这一点。

I've found an example of doing it using mod_rewrite, although I know there is a simpler way.

我发现了一个使用mod_rewrite的例子，不过我知道有一种更简单的方法。

#5

Try this...

试试这个…

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

#6

If you are Using HTML5 you can add the attribute 'download' to your links.

如果你正在使用HTML5，你可以将“下载”属性添加到你的链接中。

<a href="/test.pdf" download>

http://www.w3schools.com/tags/att_a_download.asp

http://www.w3schools.com/tags/att_a_download.asp

#7

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.

纯html/javascript是做不到的。这是因为您有一个到webserver的独立连接来检索一个单独的文件(图像)，而一个普通的webserver将为文件提供设置了内容头的内容，以便读取内容类型的浏览器将决定该类型可以在内部处理。

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.

强制浏览器不在内部处理文件的方法是更改头文件(首选内容配置或内容类型)，这样浏览器就不会尝试在内部处理文件。您可以通过在webserver上编写一个动态设置标题(即download.php)的脚本，或者通过配置webserver来返回您想要下载的文件的不同标题。您可以在webserver上按每个目录执行此操作，这将使您无需编写任何php或javascript—只需将所有下载映像放在该位置即可。

#8

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>

#9

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>

#10

There are simple 2 ways to avoid opening any file instead of downloading. 1.) A simple solution, which is bulletproof, is to change the extension name of the image to something that a browser doesn't understand, like myimage.zzz You need to tell your visitor to change the extension after download, though. Perhaps not that practical. 2.) Put the image in a zip, I usually do that with files I don't want to have opened immediately.

有两种简单的方法可以避免打开任何文件而不是下载。1)。一个简单的解决方案是防弹的，将图像的扩展名更改为浏览器不理解的东西，比如myimage。不过，您需要告诉您的访问者在下载后更改扩展名。也许不实用。2)。把图像压缩，我通常会对我不想马上打开的文件这样做。

The download tags does not work for safari or IExplorer. I hope that helps?

下载标签不适用于safari或IExplorer。我希望帮助吗?