单击href图像链接下载

Pie*_*rre 169 html image download href

我生成普通链接,如:<a href="/path/to/image"><img src="/path/to/image" /></a>在网络应用程序中.

当我点击链接时,它会在新页面中显示图片.如果要保存图片,则需要右键单击它并选择"另存为"

我不想要这种行为,我想在点击链接时弹出一个下载框,这是否可能只是用html或javascript?怎么样?

如果不是,我想我必须编写一个download.php脚本,并将其作为参数调用href,文件名为...?

Fra*_*sta 222

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>
Run Code Online (Sandbox Code Playgroud)

它尚未完全支持http://caniuse.com/#feat=download,但您可以使用modernizr https://modernizr.com/download/?及 - 类(在非核心检测下)检查支持浏览器.

  • **重要**:`download` 属性仅适用于 **同源网址**。[MDN 文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) (19认同)
  • IT不起作用.有什么建议..?? (3认同)
  • 感谢您的评论,这是一件好事.虽然你需要现代化,我现在在我的所有项目中使用它,所以...我会接受你的答案作为新的答案 (2认同)
  • 我怎样才能在移动设备上使用它? (2认同)
  • 我想你可能误解了 Modernizr 在这里的作用。简而言之,它不会添加缺少的功能...请参阅此答案:http://stackoverflow.com/questions/18681644/modernizr-a-download-for-download-attribute-does-not-work-in- ie-safari-and-and (2认同)
  • 不同的出身又如何呢?它只能打开图像,但不能下载。有什么解决办法吗? (2认同)

Ale*_*chi 57

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

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>
Run Code Online (Sandbox Code Playgroud)

"myimage"是要下载的文件的名称.此处将自动添加扩展 示例

  • 只是注意:这适用于chrome,但不适用于Firefox. (4认同)
  • 更新:它现在适用于Firefox.我使用的是33.0.2版. (2认同)

小智 46

<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>
Run Code Online (Sandbox Code Playgroud)

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

}
?>
Run Code Online (Sandbox Code Playgroud)

  • 有一个安全问题,应该关闭"application/force-download"Content-Type!哪些可以下载任何包括服务器PHP源代码! (16认同)
  • @CharlesB是对的,这将允许您使用目录遍历从服务器下载任何内容:`<a href="download.php?file=../dbparams.inc>">下载</a>`.更多信息:http://en.wikipedia.org/wiki/Directory_traversal_attack (3认同)
  • 要解决安全问题,请不要从请求中获取绝对或相对路径信息; 只获取文件名.使用$文件地带的路径,例如= PATHINFO($ _ GET ["文件"],然后通过附加一些已知的路径以$文件["基本名"]组装的路径.如果您需要从不同的文件夹,使用路径令牌提供的文件在您的请求中,然后您将其映射到下载功能中的实际路径. (2认同)

Que*_*tin 10

不,不是.您将需要服务器上的某些内容来发送Content-Disposition标头以将文件设置为附件而不是内联.您可以使用普通的Apache配置执行此操作.

我找到了一个使用mod_rewrite的例子,虽然我知道有一种更简单的方法.

  • 嘿,你说:"虽然我知道有一种更简单的方法"......哪一个?^ _ ^ (6认同)

小智 7

如果您使用HTML5,则可以将属性"download"添加到链接中.

<a href="/test.pdf" download>
Run Code Online (Sandbox Code Playgroud)

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

  • 这只适用于同源 URL (3认同)

Edw*_*mas 6

试试这个...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
Run Code Online (Sandbox Code Playgroud)


Riz*_*izo 5

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

此属性仅在设置了 href 属性时使用。

该属性的值将是下载文件的名称。对允许值没有限制,浏览器会自动检测正确的文件扩展名并将其添加到文件中(.img、.pdf、.txt、.html 等)。

示例代码:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>
Run Code Online (Sandbox Code Playgroud)

HTML5:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>
Run Code Online (Sandbox Code Playgroud)

输出

下载图片 >>

Html5 下载或 chrome

下载图片 >>

  • 这不适用于不同来源的图像 (6认同)