通过javascript函数调用更改html图像

默认情况下，我的网页具有“上载图像”占位符图像。我希望用户能够上传一个图像，并使用javascript函数调用将下面代码中的图像“images/upload_wText.png”更改为他们选择的任何图像文件。我已经看到了一些类似的问题（和答案），但它们并没有完全解决我想要实现的目标。我尝试过调整一些解决方案，但没有任何效果。这是学校的编程作业，我们不允许使用jQuery。有什么建议吗

<div class="uploadImgContainer" id="uploadImgCont">
    <img src="images/upload_wText.png" alt="upload button"/>
</div>
<div class="uploadButtonContainer">
    <input type = "file" id="uploadImageBtn" onchange="uploadPetImg(this);"/>
</div>

两个错误
首先，尝试将src设置为元素
第二，尝试获取选定图像文件的方式

因此，将id上传imgcont移动到标记并从元素中删除更改属性。

<div class="uploadImgContainer">
   <img src="images/upload_wText.png" id="uploadImgCont" alt="Image"/>
</div>
<div class="uploadButtonContainer">
   <input type = "file" id="uploadImageBtn"/>
</div>

---

希望有帮助。

发布您的javascript代码。我看到另一个用户尝试执行类似操作，他们将“this”传递给函数。我以为它会是一个文件路径，但事实并非如此。请参考以下内容：

<div class="uploadImgContainer">
   <img src="images/upload_wText.png" id="uploadImgCont" alt="Image"/>
</div>
<div class="uploadButtonContainer">
   <input type = "file" id="uploadImageBtn"/>
</div>

function uploadPetImg(imagePath){
   document.getElementById('uploadImgCont').src=imagePath;
}
window.onload=function(){
document.getElementById('uploadImageBtn').addEventListener('change',function(event){
    var imagePath=URL.createObjectURL(event.target.files[0]);
    uploadPetImg(imagePath);
});
}