Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Javascript AJAX Tutorial to Download Multiple Images From URL in Browser

Posted on February 11, 2023

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>

 

 

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.

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.

 

 

 

 

Recent Posts

  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme