Clever Geek Handbook

Upload images via button?

How can I make it so that you click the button and load all the images on the page? Image guarantors are stored locally, they are there by a direct link in the tag.

I want to do this with javascript ..

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


source to share


2 answers


For this, you need to use server side scripts like php, asp, etc.

In addition, your server may allow you to dynamically change headers using configuration.

Apache solution with mod_headers

Place the downloadable images in a directory. Inside this directory, create a .htaccess file with the following content:

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


Test Request:

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

HTML5 solution

You can use HTML5 upload attribute on anchors:

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


source


Here you need an anchor ( <a>

) with a "load" attribute. You can make a solution like this:

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


This has the added benefit of no longer requiring JS

0


source






More articles:


All Articles