Javascript AJAX Tutorial to Download Multiple Images From URL in Browser

Welcome folks today in this blog post we will be downloading multiple images from url in browser using ajax. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
</body>
<script>
   var imageUrls = [
  'https://images.unsplash.com/photo-1671725501825-0480aeb5d19b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60',
  'https://images.unsplash.com/photo-1663648732929-e9bd7c01a9a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60',
  'https://images.unsplash.com/photo-1667967951672-19627bcb1ee5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60'
];
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

var imageUrls = [

'https://images.unsplash.com/photo-1671725501825-0480aeb5d19b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60',

'https://images.unsplash.com/photo-1663648732929-e9bd7c01a9a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60',

'https://images.unsplash.com/photo-1667967951672-19627bcb1ee5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60'

];

</html>

As you can see we are declaring the array of images urls. Now we need to use the for loop to iterate over all the images to download it using ajax.

for (var i = 0; i < imageUrls.length; i++) {
  var url = imageUrls[i];

  // send an AJAX request to download the image
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function(e) {
    if (this.status == 200) {
      // download the image
      var blob = new Blob([this.response], {type: 'image/jpeg'});
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'image.jpg';
      link.click();
    }
  };
  xhr.send();
}

for (var i = 0; i < imageUrls.length; i++) {

var url = imageUrls[i];

// send an AJAX request to download the image

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {

if (this.status == 200) {

// download the image

var blob = new Blob([this.response], {type: 'image/jpeg'});

var link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);

link.download = 'image.jpg';

link.click();

}

};

xhr.send();

}

As you can see we are using the for loop to iterate all the images and inside it we are making a XMLHttpRequest() ajax request to download the image from the remote location and download the file as an attachment inside the browser. We are opening a new get request to the specified url. And getting the arraybuffer response from the url and then we are exporting the arraybuffer to an actual image file. We are downloading the image file using an anchor element. Lastly we are sending the request using the send() method.