3

How would i make it so that you click a button and it downloads all images on the page? the images arent stored locally, theyre on there by a direct link in a tag.

I want to do it using javascript..

  document.write('<input type="button" value="Download All Images" onclick="downloadIMG()">');        
    function downloadIMG() {
    // what here to download images?
    }
cracker
  • 4,900
  • 3
  • 23
  • 41
  • see http://stackoverflow.com/questions/14504377/initiate-image-download-using-jquery –  Aug 04 '14 at 09:48

2 Answers2

2

You need to use server-side scripting for this like php , asp etc.

Alternately, your server might allow you to alter headers dynamically via configuration.

Apache solution with mod_headers

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

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 the HTML5 download 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>
Muhammet Arslan
  • 975
  • 1
  • 9
  • 33
  • thanks for the insight. Im new to the web development world. Can you explain the theory-ish side of why it needs to be server side? the files arent even on my server, as i said in my initial post. So technically, theyre on someone else's and could possibly be php ready? Also, whats the difference between doing that and just right clicking and saving? Sorry im not making sense. But thanks for your help :) –  Aug 04 '14 at 10:00
  • In fact on its teory , you should say the browser via "header" what is that file ? I mean how browser render this file. Normally on your apache conf you should say "Theese folder is full of php , browser lets render it like php " . When u click an image (www.example.com/a.jpg) , and modern browsers we use knows modern image format so they atennd to show it on their window but like rar , zip they force to download. When you want to force download images, you should say that browser via header. And as i know , js not has header codes. You can set it only server-side languages and html5 also. – Muhammet Arslan Aug 04 '14 at 10:05
0

What you need here is an anchor (<a>) with the "download" attribute. You could make a solution like this:

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

This has the added benefit of no longer needing JS

drnessie
  • 877
  • 2
  • 12
  • 25