Question

我的图片预览有点问题，因为我想在点击确认按钮上将#ImagePreview的照片转到＃photo2。

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>

Answer 1

您可以获取所选图像的src属性（#ImagePreview），然后将其设置为div的background-image属性（＃photo2）。

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

示例：https://jsfiddle.net/0xd4odyf/5/

Answer 2

也许您已经解决了这个问题，但是也许有人会需要它。上面的问题是使用jquery解决的，我将使用纯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)
})

还有小提琴：https://jsfiddle.net/1Lzpy42b/

单击时将图像预览到另一个div

2 个答案: