如何通过单击图像替换页面上的图像与另一个图像？

-1

我不是javascript或html专家。我知道很基本。如何通过单击图像替换页面上的图像与另一个图像？

这是我的代码，我点击图像打开文件选择器，我选择新的图像，并将其追加到以前的图像。这工作正常，但我需要替换与前一个图像，而不是追加。不胜感激，如果任何一个可以调整它，因为我不知道如何做到这一点：

<div id="current-user"></div> 
<br> 
<input type="file" id="choose" multiple src="/logo.png" /> 

<script> 
function readImage(file) { 

    var reader = new FileReader(); 
    var image = new Image(); 

    reader.readAsDataURL(file); 
    reader.onload = function(_file) { 
     image.src = _file.target.result;    // url.createObjectURL(file); 
     image.onload = function() { 
      var w = this.width, 
       h = this.height, 
       t = file.type,       // ext only: // file.type.split('/')[1], 
       n = file.name, 
       s = ~~(file.size/1024) +'KB'; 
      $('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>'); 
     }; 
     image.onerror= function() { 
      alert('Invalid file type: '+ file.type); 
     };  
    }; 

} 
$("#choose").change(function (e) { 
    if(this.disabled) return alert('File upload not supported!'); 
    var F = this.files; 
    if(F && F[0]) for(var i=0; i<F.length; i++) readImage(F[i]); 
}); 
</script>

编辑：

我能胜任我的网页带来的图像，并将它添加到以前的形象。但我需要删除以前的图像并添加一个新的图像。我习惯使用replaceWith（）和replcaAll（）方法，但它们不起作用。

来源

2015-07-11 Bernard

相反的：

$('#uploadPreview').append(...

用途：

$('#uploadPreview').html(...

使用html()方法取代了#uploadPreview元素

来源

2015-07-11 01:54:39

我追加图像之前很实际添加以下行所有内部HMTL内容：

$('#uploadPreview').empty();

来源

2015-07-11 02:08:00 Bernard

你可以改变你的img元素的src属性，这在我看来，简单的方法：

var img = document.getElementById("idOfImage"); 
    img.attributes.src.value = "2.jpg";   //URL of other image

而且这样你还可以更改其他属性的值。

来源

2015-07-11 02:13:59

不要清空父：

$('#uploadPreview').empty(); //don't use this

只要做到：

$('#uploadPreview').find("img").attr("src",this.src); //then you don't need to set height and width again

或者按照这个片断：

$("#image").on("click", function() { 
 
    $(this).attr("src", "http://sd.keepcalm-o-matic.co.uk/i/keep-calm-its-already-done.png") 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <img id="image" src="http://i.imgur.com/W3FNHHH.png" height=200 width=200> 
 

 

 
</div>

来源

2015-07-11 02:19:52

如何通过单击图像替换页面上的图像与另一个图像？

回答

相关问题