Question

我的网页上有＆＃34;上传图片＆＃34;占位符图像默认情况下。我希望用户能够上传图像并通过javascript函数调用更改图像＆＃34; images / upload_wText.png＆＃34;在下面的代码中他们选择的任何图像文件。我在SO上看过几个类似的问题（和答案），但他们并没有完全解决我想要完成的事情。我试过调整一些解决方案但没有任何效果。这是一个学校编程任务，我们不允许使用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>

javascript代码：

function uploadPetImg(myImagePath) {
    document.getElementById("uploadImgCont").src = myImagePath;
}

Answer 1

两个错误
首先，您尝试将src设置为＆lt; div ＆gt;元件。
其次，您尝试获取所选图像文件的方式。

因此，将ID uploadImgCont 移至＆lt; img ＆gt;从＆lt; 输入＆gt;标记并删除更改属性元件。

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

只需使用纯javascript

在js中添加输入侦听器

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);
});
}

Here's the fiddle(link)

希望得到这个帮助。

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

1 个答案: