CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PiotrS
PiotrS

Reputation: 157

Get image preview to another div on click

I have a little problem with my image preview, because I would like get photo from #ImagePreview to #photo2 on click confirm button.

https://jsfiddle.net/0xd4odyf/3/

HTML

<img id="ImagePreview">
<input type="file" class="InputFile" onchange="document.getElementById('ImagePreview').src =window.URL.createObjectURL(this.files[0])">
<div id="photo2"></div>
<button id="confirm">confirm</button>

Upvotes: 0

Views: 436

Answers (2)

Mat.Now
Mat.Now

Reputation: 1725

Maybe you've already solved this problem, but perhaps someone will need it. Above problem is soloved using jquery, and I show solution using pure javascript.

let confirmButton = document.getElementById('confirm');
let photo2 = document.getElementById('photo2'); 
confirmButton.addEventListener('click', function(e){
  let srcAttr = document.getElementById('ImagePreview').getAttribute('src');
  let newImg = document.createElement('img');
  newImg.setAttribute('src', srcAttr);
  photo2.appendChild(newImg)
})

And the fiddle: https://jsfiddle.net/1Lzpy42b/

Upvotes: 1

DinoMyte
DinoMyte

Reputation: 8858

You can get the src attribute of the image (#ImagePreview) you selected and then set it as background-image attribute of the div(#photo2).

$("#confirm").click(function()
{
   var img = $('#ImagePreview').attr('src');
   $("#photo2").css('background-image','url(' + img + ')');
});

Example : https://jsfiddle.net/0xd4odyf/5/

Upvotes: 2

Related Questions