CODEWITHSUNDEEP
javascriptjquerydownload
El Diablo
El Diablo

Reputation: 13

Force download image from external server with Jquery

I want to download an image from an external server (that i don't own) with javascript/jquery.

With my actual script unluckely i can only open the img in the browser.

Script interested

var aa = $('<a/>', {"href": img ,"text": "Download", "download": ""}).appendTo( "#show" );

There are similar questions but not with jquery/javascript. And i not want to rename the files ^^

A simple solution is to write in the link "right click and save link as" but is not nice :D

Upvotes: 1

Views: 1802

Answers (1)

shery089
shery089

Reputation: 732

Note: I have taken help from this answer

I think that you want to download image on some event e.g. Click Event etc.

As per my understanding I think it should happen on clicking on image OR Download All Images with one click

You can add a class to your image elements to grap your images

<img class="downloadable" ...>

$('img.downloadable').on('click', function(){
  var $this = $(this);
  $this.wrap('<a href="' + $this.attr('src') + '" download />')
});

or if you want to download all images with on click then you can try this code

<button id="download_all_images">Download All Images</button>

$('#download_all_images').on('click', function(){
    $('img.downloadable').each(function(){
        var $this = $(this);
        $this.wrap('<a href="' + $this.attr('src') + '" download />')
    });
});

This code snippet will Force Download your Image due to HTML5 download attribute

You can check this code to verify it I am download image from external server

<button id="download_image">Download Image</button>

$('#download_image').click(); 

<a id="download_image" href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download></a>

I hope this will help! Thanks

Upvotes: 3

Related Questions