Как заменить изображение на страницу другим изображением, нажав на изображение?

Question

Я не эксперт по 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> 

Edit:

Я мог бы справиться с моей страницы, чтобы привести изображение и добавить его к предыдущему изображению. Но мне нужно удалить предыдущее изображение и добавить новое изображение. Я использовал метод replaceWith() и replcaAll(), но они не работали.

Answer 1

Вместо:

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

Использование:

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

Использование html() метод заменяет все внутреннее содержание HMTL от #uploadPreview элемента

Answer 2

Я на самом деле добавив следующую строку перед добавлением изображения:

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

Answer 3

Вы можете изменить атрибут вашего img элемента src, это простой способ, на мой взгляд:

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

И таким образом, вы можете также изменить значения других атрибутов.

Answer 4

Не выливать родителя:

$('#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>