我有一个简单的 HTML 页面，包含 4 个 button 和 4 个 div，如下所示 -
<!DOCTYPE html>
<html>
<head>
<style>
div.top {
position: relative;
left: 205px;
width: 200px;
height: 200px;
border: 3px solid #000000;
}
div.left {
position: relative;
top: 0px;
right: 0;
width: 200px;
height: 200px;
border: 3px solid #000000;
}
div.right {
position: relative;
bottom: 205px;
left: 410px;
width: 200px;
height: 200px;
border: 3px solid #000000;
}
div.bottom {
position: relative;
bottom: 205px;
left: 205px;
width: 200px;
height: 200px;
border: 3px solid #000000;
}
</style>
</head>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
<button type="button">Image 1</button>
<button type="button">Image 2</button>
<button type="button">Image 3</button>
<button type="button">Image 4</button>
</body>
</html>我想让用户能够在单击按钮时从文件浏览器中选择特定图像，并在相应的 div 中显示相同的图像。例如。当用户单击 Image 1 时，文件浏览器应要求他选择一张图片，该图片在选择后将显示在特定的 div 中。我希望用户能够对所有 4 个 div 和按钮执行此操作。
坚持这个太久了，非常感谢任何帮助!
最佳答案
这是我用的，虽然不确定这是否对你有用，但它可能会给你一个遵循的想法
<input type="file" name="profile_photo" id="fileInput" onchange="loadFile(event)" required>
<div>
<img class="" id="output"> // This is where the image will be shown
</div>
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
关于javascript - 单击按钮时用用户选择的图像填充 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43227936/