我正在尝试构建一个web应用程序，可以允许用户在上传之前预览图像，代码工作良好，但如果我复制并粘贴在同一页上，它只能工作一个部分。例如，我将相同的代码放入两个单独的div标记中，其中一个div标记用于web应用程序，而第二个div标记用于应用程序的移动版本。即使我试图更改id，javascript仍然无法加载。
下面是我的代码
<div class="web_version">
<form action="" method="POST" enctype="multipart/form-data">
<div class="form-group">
<textarea name="answer" id="" class="form-control" placeholder="Type your answer here....."></textarea>
</div> <br>
<input type="file" accept="image/*" name="file" id="file" onchange="loadImage(event)" style="display: none;">
<label for="file" style="cursor: pointer;">Photo<img src="my-img.png" alt="" width="40"></label>
<img id="input" width="200" />
<script>
var loadImage = function(event) {
var image = document.getElementById('input');
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
<button type="submit" name="solution" class="btn btn-primary">Answer</button><br>
</form>
</div>
<!-- Below is the code which is for the mobile version -->
<div class="mobile_version">
<form action="" method="POST" enctype="multipart/form-data">
<div class="form-group">
<textarea name="answer" id="" class="form-control" placeholder="Type your answer here....."></textarea>
</div> <br>
<input type="file" accept="image/*" name="file" id="file" onchange="loadImage(event)" style="display: none;">
<label for="file" style="cursor: pointer;">Photo<img src="my-img.png" alt="" width="40"></label>
<img id="input" width="200" />
<script>
var loadImage = function(event) {
var image = document.getElementById('input');
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
<button type="submit" name="solution" class="btn btn-primary">Answer</button><br>
</form>
</div>
首先，将。他们会两次添加相同的函数loadimage。
因此，首先需要做的是将函数loadimage拆分为loadimage1和loadimage2。
接下来是选择器document.getElementById('input')。在这两个脚本中，该函数将在页面中找到相同的第一个输入（因为它将从页面的开始搜索，而不是像您想象的那样在中搜索）。
因此您需要更清楚地指定要在特定表单中使用的输入。例如，您可以使用var image=document.queryselector('div.web_version input')；
整体解决方案：
<div class="web_version">
<form action="" method="POST" enctype="multipart/form-data">
<div class="form-group">
<textarea name="answer" id="" class="form-control" placeholder="Type your answer here....."></textarea>
</div> <br>
<input type="file" accept="image/*" name="file" id="file" onchange="loadImage1(event)" style="display: none;">
<label for="file" style="cursor: pointer;">Photo<img src="my-img.png" alt="" width="40"></label>
<img id="input" width="200" />
<script>
var loadImage1 = function(event) {
var image = document.querySelector('div.web_version input');
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
<button type="submit" name="solution" class="btn btn-primary">Answer</button><br>
</form>
</div>
<!-- Below is the code which is for the mobile version -->
<div class="mobile_version">
<form action="" method="POST" enctype="multipart/form-data">
<div class="form-group">
<textarea name="answer" id="" class="form-control" placeholder="Type your answer here....."></textarea>
</div> <br>
<input type="file" accept="image/*" name="file" id="file" onchange="loadImage2(event)" style="display: none;">
<label for="file" style="cursor: pointer;">Photo<img src="my-img.png" alt="" width="40"></label>
<img id="input" width="200" />
<script>
var loadImage2 = function(event) {
var image = document.querySelector('div.mobile_version input');
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
<button type="submit" name="solution" class="btn btn-primary">Answer</button><br>
</form>
</div>
