将多张图片上传到页面

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]等）。 使用此解决方法，您可以获得所需的所有标签。

祝你今天过得愉快！