当前位置： 文江博客 话题详情

href 图片链接点击下载

发布于 2024-08-24 05:28:54 字数 291 浏览 4 评论 0 原文

我生成正常链接，例如： >一个网络应用程序。

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

我不想要这种行为，我希望当我点击链接时弹出一个下载框，可以吗只是用 html 或 javascript 吗？如何？

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

原文

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

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"

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?

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（10）

手心的温暖 2024-08-31 05:28:54 
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

尚未完全支持 caniuse，但您可以与 modernizr（在非核心检测下）检查浏览器的支持情况。

<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 caniuse, but you can use with modernizr (under Non-core detects) to check the support of the browser.

回复 原文
妄断弥空 2024-08-31 05:28:54

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

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

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

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

<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

回复 原文
天暗了我发光 2024-08-31 05:28:54 
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

下载.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');

}
?>

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

}
?>
回复 原文
雪若未夕 2024-08-31 05:28:54

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

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

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

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

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

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

回复 原文
末蓝 2024-08-31 05:28:54

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

我发现 使用 mod_rewrite 执行此操作的示例，尽管我知道有一种更简单的方法。

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.

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

回复 原文
孤独陪着我 2024-08-31 05:28:54

试试这个...

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

Try this...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
回复 原文
愁以何悠 2024-08-31 05:28:54

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

下载图片>>

HTML download attribute to specify that the target will be downloaded when a user clicks on the hyperlink.

This attribute is only used if the href attribute is set.

The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).

Example code:

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

Output:

Download Image >>

Html5 download or chrome

Download Image >>

回复 原文
情话墙 2024-08-31 05:28:54

你不能用纯 html/javascript 来做到这一点。这是因为您有一个与网络服务器的单独连接来检索单独的文件（图像），并且普通的网络服务器将提供设置了内容标头的文件，以便读取内容类型的浏览器将决定该类型可以在内部处理。

强制浏览器不在内部处理文件的方法是更改​​标头（最好是内容处置或内容类型），这样浏览器就不会尝试在内部处理文件。您可以通过在网络服务器上编写动态设置标头的脚本（即 download.php）或配置网络服务器为您要下载的文件返回不同的标头来实现此目的。您可以在网络服务器上的每个目录上执行此操作，这将允许您无需编写任何 php 或 javascript - 只需将所有下载图像放在该位置即可。

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.

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.

回复 原文
桃气十足 2024-08-31 05:28:54

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

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>
回复 原文
桜花祭 2024-08-31 05:28:54

使用图像点击下载图像！

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

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

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>
回复 原文
~没有更多了~

关于作者

嗼ふ静

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文