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

Answer 1

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="donwloadAll()"> Download All </button>
</div>

<script>
function donwloadAll(){
    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.