Natives js zur Realisierung der Bild-Upload-Steuerung

<div Klasse="Karte">
    <input id="hochladen" type="datei" accept=".jpg" />
    <div Klasse="Ansicht">
        <!-- Nach erfolgreichem Upload -->
        <div id="imgContainer" Klasse="img-container">
            <img id="img" />
            <!-- Bewegen Sie die Maus, um die Ansichts- und Löschvorgänge anzuzeigen-->
            <div Klasse="Bildmaske">
                <span id="showImg">Anzeigen</span>
                <span id="delImg">Löschen</span>
            </div>
        </div>
        <!-- Vor erfolgreichem Hochladen -->
        <span id="Symbol">+</span>
    </div>
</div>

.Karte {
    Position: relativ;
    Breite: 200px;
    Höhe: 140px;
    Polsterung: 5px;
    Rand rechts: 20px;
    Rand: 1px gestrichelt #d9d9d9;
    Rahmenradius: 6px;
    Rand: 300px automatisch;
}

.card Eingabe {
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Deckkraft: 0;
    Cursor: Zeiger;
}

.Karte .Ansicht {
    Breite: 100 %;
    Höhe: 100%;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}

.Karte .Ansicht #Symbol {
    Anzeige: Inline-Block;
    Schriftgröße: 30px;
}

.Karte .Ansicht .img-container {
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Anzeige: keine;
}

.img-container img {
    Breite: 100 %;
    Höhe: 100%;
}

.img-container .img-maske {
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Deckkraft: 0;
    Hintergrund: rgba(0, 0, 0, .3);
    Übergang: alle 0,5 Sekunden mühelos;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}

.img-container:hover .img-mask {
    Deckkraft: 1;
}

.img-mask span {
    Farbe: #fff;
    Rand: 0 10px;
    Cursor: Zeiger;
}

<Skript>
    const upload = document.getElementById('hochladen');
    const imgContainer = document.getElementById('imgContainer');
    const img = document.getElementById('img');
    const icon = document.getElementById('icon');

    lassen Sie imgUrl = '';
    //Erstelle eine URL, nachdem das Bild erfolgreich hochgeladen wurde
    upload.onchange = Funktion (Wert) {
        const fileList = Wert.Ziel.Dateien;
        if (Dateiliste.Länge) {
            imgContainer.style.display = "Block";
            Symbol.Stil.Anzeige = "keine";
            imgUrl = window.URL.createObjectURL(fileList[0]);
            img.src = Bild-Url;
        }
    }
<Skript>

<!-- Modalbox zur Bildvorschau-->
<div id="modal">
    <span id="closeIcon">Schließen</span>
    <div Klasse="Inhalt">
        <img id="modalImg">
    </div>
</div>

/* modaler Stil */
#modal {
    Position: fest;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
    Breite: 0;
    Höhe: 0;
    Kastenschatten: 0 0 10px #d9d9d9;
    Hintergrund: rgba(0, 0, 0, .3);
    /* Übergang: alle .1s ease-in-out; */
    Überlauf: versteckt;
}

#modal .inhalt {
    Box-Größe: Rahmenbox;
    Breite: 100 %;
    Höhe: 100%;
    Polsterung: 45px 20px 20px;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
}

#modal #modalImg {
    Höhe: 100%;
}

#modal #closeIcon {
    Position: absolut;
    oben: 10px;
    rechts: 10px;
    Cursor: Zeiger;
}

/* ...Fahren Sie mit dem obigen Code fort*/
const showImg = document.getElementById('showImg');
const delImg = document.getElementById('delImg');
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImg');
const closeIcon = document.getElementById('closeIcon');

// Klicken Sie, um eine Vorschau des Bildes anzuzeigen showImg.onclick = function () {
    modal.style.width = "100 %";
    modal.style.height = "100%";
    modalImg.src = Bild-Url;
}

// Das Modalfenster schließen closeIcon.onclick = function () {
    modal.stil.breite = "0";
    modal.style.height = "0";
    modalImg.src = '';
}

// Hochgeladenes Bild löschen delImg.onclick = function () {
    Upload-Wert = '';
    imgUrl = '';
    Symbol.Stil.Anzeige = "Block";
    imgContainer.style.display = "keine";
}