將多張圖片上傳到頁面

Question

我正在嘗試添加一個包含圖像的 5 行列，以及單擊每個圖像並上傳圖片的功能。 我有一個工作，但是當我嘗試添加第二個圖像時，它不像第一個圖像那樣工作，我已經玩過腳本，因為那是問題的來源，但我仍然無法讓它工作。

這是下面的代碼，任何提示都會非常有幫助，在此先感謝

<div class="row">
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
        </div>

        <script src="app.js"></script>

<script>
    const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');
const uploadBtn = document.querySelector('#uploadBtn');

imgDiv.addEventListener('mouseenter', function(){
    uploadBtn.style.display = "block";
});

imgDiv.addEventListener('mouseleave', function(){
    uploadBtn.style.display = "none";
});

file.addEventListener('change', function(){
    const choosedFile = this.files[0];
    alert(choosedFile);

    if (choosedFile) {

        const reader = new FileReader(); 

        reader.addEventListener('load', function(){
            img.setAttribute('src', reader.result);
        });

        reader.readAsDataURL(choosedFile);
    }
});
</script>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1{
    font-family: sans-serif;
    text-align: center;
    font-size: 30px;
    color: #222;
}

.profile-pic-div{
    margin-top: 25px;
    margin-right: 10px;
    margin-left: 20px;
    height: 160px;
    width: 160px;
    overflow: hidden;
    border: 1px solid grey;
}

#photo{
    height: 100%;
    width: 100%;
}

#file{
    display: none;
}

#uploadBtn{
    height: 80px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    color: wheat;
    line-height: 30px;
    font-family: sans-serif;
    font-size: 15px;
    cursor: pointer;
    display: none;
}

更新：我嘗試創建一個新的 app.js 文件並更改 id 以便它們是唯一的。 我還將這些相應地添加到 html 文件的第二行以及我的 style.css。 但是，現在當我單擊行中的第二張圖片上傳圖片時，它會將其添加到第一列圖片中。

const imgDiv1 = document.querySelector('.profile-pic-div1');
const img1 = document.querySelector('#photo1');
const file1 = document.querySelector('#file1');
const uploadBtn1 = document.querySelector('#uploadBtn1');

imgDiv1.addEventListener('mouseenter', function(){
    uploadBtn1.style.display = "block";
});

imgDiv1.addEventListener('mouseleave', function(){
    uploadBtn1.style.display = "none";
});

file1.addEventListener('change', function(){

    const choosedFile = this.files[3];

    if (choosedFile) {

        const reader = new FileReader(); //FileReader is a predefined function of JS

        reader.addEventListener('load', function(){
            img1.setAttribute('src', reader.result);
        });

        reader.readAsDataURL(choosedFile);
    }
});

Answer 1

如果兩個項目具有相同的 ID，則不能 select 一個項目。 ID 是唯一的，您可以使用let labels = document.getElementsByTagName("label") 。 現在要獲取 label 元素，您可以使用索引。 （ labels[0]等）。 使用此解決方法，您可以獲得所需的所有標簽。

祝你今天過得愉快！