我生成正常的链接,如:<a href="/path/to/image"><img src="/path/to/image" /></a>在web应用程序。

当我点击链接时,它会在一个新页面中显示图片。如果你想保存图片,你需要右键点击它,选择“另存为”

我不希望这种行为,我想有一个下载框弹出时,我点击链接,这是可能的只是与html或javascript?如何?

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


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

我已经找到了一个使用mod_rewrite的例子,尽管我知道有一个更简单的方法。


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


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

}
?>

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

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

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


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

caniuse还不完全支持,但可以使用modernizr(在非核心检测下)来检查浏览器的支持。


试试这个…

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

如果你使用HTML5,你可以添加属性“下载”到你的链接。

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

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


图片下载使用图片点击!

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

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

简单的代码图像下载与图像点击使用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>

属性指定当用户单击超链接时将下载目标。

该属性仅在设置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浏览器

下载镜像>>