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
.
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.