Downloading image using jQuery

Asked Jan 31 '18 at 19:19

Active Jun 12 '19 at 21:37

Viewed 179 times

The following code is working fine here in sandbox and I am able to down it but in my machine and browser, using Chrome it is opening the images in next tab instead of downloading them as it is supposed to be by clicking on .imgs

Why might this happen and how can I prevent it to open in new page and just be download?

 $('section img').each(function (e) {
    var $this = $(this);
    $('#imageBox').append('<a class="imgs" href="' + $this.attr('src') + '"  download>Download</a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageBox"></div>
<section>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Perspolis_FC.png" alt="Smiley face" height="42" width="42">
<img src="http://pngimg.com/uploads/manchester_united/manchester_united_PNG15.png" alt="Smiley face" height="42" width="42">
</section>

edited Jun 12 '19 at 21:37

halfer

19,824
17
99
186

asked Jan 31 '18 at 19:19

Mona Coder

6,212
18
66
128

Have you tried the suggested solution here? https://stackoverflow.com/questions/23825871/how-to-force-a-download-file-prompt-instead-of-displaying-it-in-browser-with-htm – pastaleg Jan 31 '18 at 19:23
2

For me your snippet is work as expected, it is download me the image on Chrome `Version 63.0.3239.132` – Peter Jan 31 '18 at 19:23
Are you trying to do it from inside an iframe? – Munim Munna Jan 31 '18 at 19:28
Hi Munim , yes I think the images are inside an iframe – Mona Coder Jan 31 '18 at 19:46

Downloading image using jQuery

0 Answers0