我编写了此代码及其工作原理，但是当我选择图像时，它仅出现在第一个元素的前面。
<html lang="en">
<head>
<title>Change image on select new image from file input</title>
</head>
<body>
<ul>
<li>
<input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
<img class="output" width="100px" />
</li>
<li>
<input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
<img class="output" width="100px" />
</li>
<li>
<input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
<img class="output" width="100px" />
</li>
</ul>
<script type="text/javascript">
var loadFile = function(event) {
var output = document.getElementsByClassName('output')[0];
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
我只希望每个图像都出现在其输入的前面。
这只是一种方式，您可以通过许多其他方式来实现。
<html lang="en">
<head>
<title>Change image on select new image from file input</title>
</head>
<body>
<ul>
<li>
<input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event,'output1')">
<img class="output output1" width="100px" />
</li>
<li>
<input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event,'output2')">
<img class="output output2" width="100px" />
</li>
<li>
<input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event,'output3')">
<img class="output output3" width="100px" />
</li>
</ul>
<script type="text/javascript">
var loadFile = function(event,id) {
var output = document.getElementsByClassName(id)[0];
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
使用Jquery，您可以根据需要添加任意数量的输入。
<html lang="en">
<head>
<title>Change image on select new image from file input</title>
</head>
<body>
<ul>
<li>
<input type="file" accept=".png, .jpg, .jpeg">
<img class="output" width="100px" />
</li>
<li>
<input type="file" accept=".png, .jpg, .jpeg">
<img class="output" width="100px" />
</li>
<li>
<input type="file" accept=".png, .jpg, .jpeg">
<img class="output" width="100px" />
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("input[type=file]").on("change", function(e) {
$(this).next().attr("src", URL.createObjectURL(e.target.files[0]));
})
</script>您每次文件更改时都在第一个<img>元素上超载。最好在目标输入元素旁边找到<img>：
var loadFile = function(event) {
var output = event.target.nextElementSibling;
output.src = URL.createObjectURL(event.target.files[0]);
};