我有一个名为 f1 的按钮，我希望它显示用户在选择图像时放置的图像的值。例如，当您选择一个图像时，它将显示在屏幕上，但我也希望它以适当的宽度和高度属性显示在按钮上，我该怎么做？我尝试过 document.getElementById("f1").innerHTML = input.value;但这只显示文件路径，而不显示实际图像。我很感谢您的帮助。
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img')
.attr('src', e.target.result)
.width(250)
.height(200);
};
reader.readAsDataURL(input.files[0]);
const f1 = document.getElementById("f1").innerHTML = input.value;
}
}#f1 {
width:50px;
height:40px;
}
#img {
position:relative;
left:275px;
top:200px;
}<!DOCTYPE html>
<html>
<head>
<title>Filter Image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type='file' id="file" onchange="readURL(this);" accept="image/gif, image/jpeg, image/png">
<img id="img"/>
<button id = "f1"></button>
</body>
</html>最佳答案
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img')
.attr('src', e.target.result)
.width(50)
.height(50);
};
reader.readAsDataURL(input.files[0]);
}
}<!DOCTYPE html>
<html>
<head>
<title>Filter Image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type='file' id="file" onchange="readURL(this);" accept="image/gif, image/jpeg, image/png">
<button id = "f1"><img id="img"/></button>
</body>
</html>关于javascript - 如何让按钮显示文件/图像的值？ JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58042496/