How can I download all images in single click(Download all) by using PHP

Question

If I click that Download All I need to download all that image to my local system

<div>
  <img src='image1.jpg'/>
  <img src='image2.jpg'/>
  <img src='image3.jpg'/>
  <button> Download All </button>
</div>

Give me some solution for this

Please explain what you have tried without success rather than asking for a solution to your problem. — Guy, Jul 04 '15 at 11:21

score 3 · Accepted Answer · edited Sep 13 '19 at 12:58

If you want to download without zipped them, you can use a javascript function like this to download one to one:

function downloadWithName(uri, name) {
    function eventFire(el, etype){
        if (el.fireEvent) {
            (el.fireEvent('on' + etype));
        } else {
            var evObj = document.createEvent('MouseEvent');
            evObj.initMouseEvent(etype, true, false, 
                 window, 0,
                 0, 0, 0, 0,
                 false, false, false, false,
                 0, null);
            el.dispatchEvent(evObj);
        }
    }

    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    eventFire(link, "click");
}

But, you need to make some changes in your code in order to allow to download all images with a single click. In your case, this code will run ;)

<div id="allImages">
  <img src='image1.jpg' />
  <img src='image2.jpg' />
  <img src='image3.jpg' />
  <button onclick="downloadAll()"> Download All </button>
</div>

<script>
function downloadAll(){
    var div = document.getElementById("allImages");
    console.log(div);
    var images = div.getElementsByTagName("img");
    console.log(images)

    for(i=0; i<images.length ; i++){
        console.log(images[i]);
        downloadWithName(images[i].src,images[i].src);
    }
}

function downloadWithName(uri, name) {
    function eventFire(el, etype){
        if (el.fireEvent) {
            (el.fireEvent('on' + etype));
        } else {
            var evObj = document.createEvent('MouseEvent');
            evObj.initMouseEvent(etype, true, false, 
                 window, 0, 0, 0, 0, 0,
                 false, false, false, false,
                 0, null);
            el.dispatchEvent(evObj);
        }
    }

    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    eventFire(link, "click");
}
</script>

As you can imagine, you can add more <img> inside <div id="allImages"> and user will download all together.

I have fixed for Firefox ;) In downloadWithName > eventFire you have to use initMouseEvent instead of initEvent. I have edited my answer, try it! — EnriMR, Jul 04 '15 at 12:32

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

HTTP does not support more than one file download at once.

There are two solutions:

Open any amount of windows to initiate the file downloads (using JavaScript)
Create a script to zip the file.

You could use try scripts from this link for more options.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 04 '15 at 10:35

Abey

1,408
11
26

Ok will create zip file and try it out – Pravin Jul 04 '15 at 11:09
If the answer was helpfull, please vote up or mark it as right, – Abey Jul 04 '15 at 11:10

score -3 · Answer 3 · edited Jul 07 '17 at 14:10

-3

You can just left click on the website and select 'Save as..' (in Chrome) / 'save page as' (in Firefox). You will get all the images in that page in a folder. You do not have to use any scripts or any CLI.

edited Jul 07 '17 at 14:10

Tomasz

4,847
2
32
41

answered Jul 07 '17 at 13:33

lulu

191
1
7

the question is asking for a programmatic way to do this – Noam Hacker Jul 07 '17 at 14:07

How can I download all images in single click(Download all) by using PHP

3 Answers3