通过按钮下载图片

Download Images via button?

本文关键字：下载 按钮      更新时间：2023-09-26

我怎么做，这样你点击一个按钮，它下载页面上的所有图像?这些图像不是存储在本地，而是通过标签中的直接链接在那里。

我想用javascript..

  document.write('<input type="button" value="Download All Images" onclick="downloadIMG()">');        
    function downloadIMG() {
    // what here to download images?
    }

您需要使用服务器端脚本，如php, asp等。

或者，您的服务器可能允许您通过配置动态更改标头。

Apache解决方案与mod_headers

将可下载的图像放在一个目录中。在这个目录中，创建一个.htaccess文件，其内容如下:

SetEnvIf Request_URI "([^/]+'.jpg)$" REQUESTED_IMAGE_BASENAME=$1
SetEnvIf Request_URI "([^/]+'.png)$" REQUESTED_IMAGE_BASENAME=$1
Header set Content-Disposition "attachment; filename='"%{REQUESTED_IMAGE_BASENAME}e'"" env=REQUESTED_IMAGE_BASENAME
测试要求:

HEAD /test/Water%20lilies.jpg HTTP/1.1
Host: localhost
Test Response:
HTTP/1.1 200 OK
Date: Sat, 23 Jul 2011 09:03:52 GMT
Server: Apache/2.2.17 (Win32)
Last-Modified: Thu, 23 Aug 2001 14:00:00 GMT
ETag: "26000000017df3-14752-38c32e813d800"
Accept-Ranges: bytes
Content-Length: 83794
Content-Disposition: attachment; filename="Water lilies.jpg"
Content-Type: image/jpeg
<<p> HTML5解决方案/strong>

你可以在锚上使用HTML5下载属性:

<a href="http://dummyimage.com/600x400/000/fff.png"
    download>Download this image</a>
<a href="http://dummyimage.com/600x400/000/fff.png"
    download="alternate-filename.png"><img
        src="http://dummyimage.com/150x100/000/fff.png"></a>

这里需要的是一个带有"download"属性的锚(<a>)。您可以创建这样的解决方案:

<a href="link/to/img" download>Download Link</a>

这样做的额外好处是不再需要JS

相关文章：