我有一个简单的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()，它选择第一个匹配的元素。代码示例：