(Javascript和Html)函数做另一个它没有被告知要做的函数

Question

正在构建一个表单，并且有 2 个文件输入，我打算(一旦上传文件(将输入容器的背景设置为上传的图像，

我使用标签隐藏默认按钮并将其更改为我自己的按钮

这是输入之一及其容器

<div class="input_container" id="img_A">
<input onchange="changeA(event)" class="file_input" name="fileA" type="file">
<label for="file_input">
<img src="../images/add_icon.png" id="img_add">
</label>
</div>

第二个

<div class="input_container" id="img_B">
<input onchange="changeB(event)" class="file_input" name="fileB" type="file">
<label for="file_input">
<img src="../images/add_icon.png" id="img_add">
</label>
</div>

和 js 函数

function changeA(event){
var getImagePathA = URL.createObjectURL(event.target.files[0]);
$('#img_A').css('background-image', 'url(' + getImagePathA + ')');
}
function changeB(event){
var getImagePathB = URL.createObjectURL(event.target.files[0]);
$('#img_B').css('background-image', 'url(' + getImagePathB + ')');
}

但结果是，当我使用第二个输入时，它将背景设置为上传的图像，但第一个框而不是我单击

的图像当我使用警报对此进行测试时，第二个输入似乎正在运行 changeA(事件(而不是 changeB(事件(

提前感谢您的任何帮助！

Answer 1

看起来您使用的是相同的../images/add_icon.png图像文件。因此，当您单击第二个输入时，它仍然指向../images/add_icon.png.

您应该尝试：

<div class="input_container" id="img_A">
<input onchange="changeA(event)" class="file_input" name="fileA" type="file">
<label for="file_input">
<img src="../images/image_file_A.png" id="img_add">
</label>
</div>
<div class="input_container" id="img_B">
<input onchange="changeB(event)" class="file_input" name="fileB" type="file">
<label for="file_input">
<img src="../images/image_file_B.png" id="img_add">
</label>
</div>