在同一個 web 頁面上顯示不同的圖像

Question

我試圖讓每個 div 顯示不同的上傳圖像，但是當我嘗試使用第二個 div 上傳圖片時，它會更改第一個 div 的圖片，而第二個 div 沒有任何反應。

<div class="user-img">
    <img src="./images/image.jpg" alt="Avatar" id="photo">
    <input type="file" id="file" accept="image/*">
    <label for="file" id="uploadbtn"><i class="fas fa-camera"></i></label>
</div>
<div class="user-img">
    <img src="./images/image.jpg" alt="Avatar" id="photo">
    <input type="file" id="file" accept="image/*">
    <label for="file" id="uploadbtn"><i class="fas fa-camera"></i></label>
</div>
<script>
    const img = document.querySelector('#photo');
    const file = document.querySelector('#file');

    file.addEventListener('change', function(){
        const chosenFile = this.files[0];
        if(chosenFile){
            const reader = new FileReader();
            reader.addEventListener('load', function(){
            img.setAttribute('src',reader.result);});
            reader.readAsDataURL(chosenFile);
        }
});
</script>

Answer 1

您不能有兩個具有相同 ID 的文件和照片的元素。 ID 應該是唯一的。 在這種情況下，您應該改用類。

然后使用document.getElementsByClassName()接收可以迭代的元素數組並將事件偵聽器添加到文件元素。

Answer 2

更改您的<img>元素以使用 class 名稱，而不是 id。 前任：

<img src="./images/image.jpg" alt="Avatar" class="photo">

接下來使用 document.getElementsByClassName() 調用獲取圖像，如下所示

const imgs = document.getElementsByClassName('photo');

然后你可以遍歷 imgs 數組並設置 src 屬性，像這樣

imgs.forEach((img) => {
  img.setAttribute('src', reader.result);
});