Question

我创建了一个画廊。

画廊分为四行网格。您可以选择图像，然后使用Javascript将图像放置在网格中。

这是我的代码：

let column1 = document.getElementsByClassName('column1')[0];
let column2 = document.getElementsByClassName('column2')[0];
let column3 = document.getElementsByClassName('column3')[0];
let column4 = document.getElementsByClassName('column4')[0];



let column = 1;

document.getElementById('picField').onchange = function (evt) {
    let tgt = evt.target || window.event.srcElement,
        files = tgt.files;
    for (let x = 0; x < files.length; x++) {
        // FileReader support
        if (FileReader && files && files.length) {
            let fr = new FileReader();
            fr.readAsDataURL(files[x]);
            fr.onload = function () {

                let img = document.createElement("img");
                img.src = fr.result;

                let removeButton = document.createElement("img");
                removeButton.src = "remove.png";

                if (column == 1) {
                    column1.appendChild(img);
                    column++;
                } else if (column == 2) {
                    column2.appendChild(img);
                    column++;
                } else if (column == 3) {
                    column3.appendChild(img);
                    column++;
                } else if (column == 4) {
                    column4.appendChild(img);
                    column = 1;
                }
            }

        }

        // Not supported
        else {
            // fallback -- perhaps submit the input to an iframe and temporarily store
            // them on the server until the user's session ends.
        }
    }


}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    margin: 30px 60px;
    background-color: lightgray;
    border-style: ridge;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    width: 100%;
    z-index: 1;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        max-width: 100%;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="load">
        <input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt="" accept="image/*"
            multiple />
    </div>
    <div class="row">
        <div class="column column1">
        </div>
        <div class="column column2">
        </div>
        <div class="column column3">
        </div>
        <div class="column column4">
        </div>
    </div>
</body>
<script src="/app.js"></script>

</html>

现在，我添加了一个额外的图像：

let removeButton = document.createElement("img");
                removeButton.src = "remove.png";

This removeButton is just a simple 24px red cross。我想将此removeButton添加到每个图像的右上角。当用户单击removeButton时，必须从图库中删除该图像。

我想Javascript实现并不难。当图像和removeButton共享相同的父对象时。我可以选择父项并将其删除。

但是我没有正确的布局。我试图使图像相对和removeButton绝对。但是然后removeButton绝对显示在主体上，而不显示在图像上。

首先，我添加了removeButton作为图像的子级。然后，我将元素包装在div中，但是注意了。 This is what i have in mind.

有人可以帮助我解决这个问题吗？

Answer 1

您应该改用<button>，可以为其分配图像并相应设置样式。两者都是图像不是一个好主意，并且总的来说，拥有明显<button>是<img>的可访问性也不是一个好主意。我认为走那条路可能会起作用。如果您不了解这个想法，我可以根据您的代码考虑一个示例。

编辑了我所想的小例子

let removeButton = document.createElement("button");
removeButton.classList.add("button-delete");
removeButton.innerHTML = "X";

if (column == 1) {
    column1.appendChild(img);
    // You will have to append this button to each column manually to each column number
    column1.appendChild(removeButton);
    column++;

此外，您还必须向按钮添加click函数，在这种情况下，您必须删除img元素和按钮本身...但是请记住...您的方式“这样做是有点硬编码的，在删除图像时，您还应该说，很好，列数应该减少，但是如果您在此图库中已经有图像，请删除该图像。在中间，这看起来不太好。

这已经是这里的另一个问题，但是我建议您减少强制执行此操作，例如，如果可以的话，请尝试不使用许多if，首先，尝试将图像放置到自动换行，我想到的第一件事就是使用flex来将它们自动换成适合图库div的方式，这样，您只应删除图像，并且换行将自行修复，而您无需不必保留列数之类的东西。

对不起，如果我不清楚：）

Answer 2

I found this topic.我试图在一个单独的文件中创建一个带有覆盖的img，并且它可以正常工作。

比起我在我的专案中执行这个程式，现在它运作良好：

let column1 = document.getElementsByClassName('column1')[0];
let column2 = document.getElementsByClassName('column2')[0];
let column3 = document.getElementsByClassName('column3')[0];
let column4 = document.getElementsByClassName('column4')[0];



let column = 1;

document.getElementById('picField').onchange = function (evt) {
    let tgt = evt.target || window.event.srcElement,
        files = tgt.files;
    for (let x = 0; x < files.length; x++) {
        // FileReader support
        if (FileReader && files && files.length) {
            let fr = new FileReader();
            fr.readAsDataURL(files[x]);
            fr.onload = function () {

                let containerDiv = document.createElement("div");
                containerDiv.setAttribute("class", "img-overlay");

                let img = document.createElement("img");
                img.src = fr.result;

                let removeButton = document.createElement("button");
                removeButton.setAttribute("class", "overlay");

                let removeImage = document.createElement("img");
                removeImage.src = "https://image.flaticon.com/icons/svg/579/579006.svg";

                removeButton.appendChild(removeImage);

                containerDiv.appendChild(img);
                containerDiv.appendChild(removeButton);

                if (column == 1) {
                    column1.appendChild(containerDiv);
                    column++;
                } else if (column == 2) {
                    column2.appendChild(containerDiv);
                    column++;
                } else if (column == 3) {
                    column3.appendChild(containerDiv);
                    column++;
                } else if (column == 4) {
                    column4.appendChild(containerDiv);
                    column = 1;
                }
            }

        }

        // Not supported
        else {
            // fallback -- perhaps submit the input to an iframe and temporarily store
            // them on the server until the user's session ends.
        }
    }


}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    margin: 30px 60px;
    background-color: lightgray;
    border-style: ridge;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.img-overlay {
    position: relative;
    width: 100%;

}

.overlay {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 6px;
    right: 3px;
}


.column img {
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    width: 100%;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        min-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        min-width: 100%;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="load">
        <input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt="" accept="image/*"
            multiple />
    </div>
    <div class="row">
        <div class="column column1">
        </div>
        <div class="column column2">
        </div>
        <div class="column column3">
        </div>
        <div class="column column4">
        </div>
    </div>
</body>
<script src="/app.js"></script>

</html>

我在img中添加了一个位置，这是错误的。现在工作正常，我可以开始实现删除功能。

将图像作为按钮添加到另一图像上

2 个答案: