我有一个简单的html文档,如下所示,我想将一个图像作为输入,并将其显示回类名为imagecontainer的div类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<label for="profile">Please insert your image</label>
<input type="file" name="profile" id="profile">
</div>
<div>
<button>Submit</button>
</div>
<div class="imagecontainer">
</div>
</body>
</html>
我正在使用的javascript文件可以在下面看到
const button = document.querySelector('button')
button.addEventListener('click',()=>{
const imagecontainer = document.getElementsByClassName('imagecontainer')
const cardImageInput = document.getElementById('profile')
const myImage = cardImageInput.value
cardImageInput.value = ''
const image = document.createElement('img')
image.src = myImage
image.classList.add('profile-image')
imagecontainer.appendchild(image)
console.log(imagecontainer)
})
代码看起来很简单,但我无法找出问题,每次运行时,我都会在Web控制台Uncaught TypeError: imagecontainer.appendchild is not a function at HTMLButtonElement.<anonymous>
上看到此错误消息
但是在运行程序后,我得到了一个错误c:\fakepath\FdkmPsOWQAINAt8.png:1 GET c:\fakepath\FdkmPsOWQAINAt8.png net::ERR_UNKNOWN_URL_SCHEME我被告知这是浏览器的安全实现。
我找到的解决方法是使用FileReader编辑我的javascript,下面是为我工作的代码
const button = document.querySelector('button');
const fileInput = document.querySelector("input[type=file]");
button.addEventListener('click',()=>{
const imagecontainer = document.querySelector('.imagecontainer');
const image = document.createElement('img');
var fReader = new FileReader();
fReader.readAsDataURL(fileInput.files[0]);
fReader.onloadend = function(event){
image.src = event.target.result;
image.classList.add('profile-image');
}
imagecontainer.appendChild(image);
console.log(imagecontainer);
});
1条答案
按热度按时间h5qlskok1#
代码中的两个问题:
1.正确的方法名是
appendChild
,而不是appendchild
。由于JavaScript区分大小写,正确的代码应该是imagecontainer.appendChild(image)
。document.getElementsByClassName
返回元素的集合。您需要从集合中访问特定元素,然后才能对其使用appendChild
方法。您可以使用document.querySelector()
,它选择第一个匹配的元素。代码示例: