Natives js zur Realisierung der Bild-Upload-Steuerung

In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung der Bild-Upload-Steuerung zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Ändern Sie den nativen Eingabestil

HTML-Struktur

<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>

CSS-Stile

.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;
}

Effektanzeige

2. Bilder hochladen und anzeigen

Achten Sie auf das Eingabeänderungsereignis und erstellen Sie eine URL, nachdem das Bild erfolgreich hochgeladen wurde

<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>

Anzeige nach erfolgreichem Upload

3. Implementieren Sie die Bildvorschau

Schreiben Sie eine Modalbox

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

Modale Stil

/* 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;
}

Holen Sie sich dann das Element und warten Sie auf Klickereignisse

/* ...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";
}

Effektbild in der Vorschau

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS implementiert drei Methoden zum Hochladen von Bildern und Realisieren der Bildvorschaufunktion
js-Methode zur Realisierung der Vorschau hochgeladener Bilder
Bildvorschau hochladen JS-Skript Implementierungsbeispiel für die Bildvorschau in der Eingabedatei
WeChat JSSDK Bilder hochladen
js zum Hochladen von Bildern und zur Vorschau vor dem Hochladen
js implementiert Strg+V zum Einfügen hochgeladener Bilder (kompatibel mit Chrome, Firefox, IE11)
Javascript überprüft die Größe hochgeladener Bilder [clientseitig]
Realisieren Sie die Funktion zur sofortigen Anzeige hochgeladener Bilder in JSP
Zu den Einschränkungen vor dem Hochladen von Bildern durch JS gehören (jpg, jpg, gif, Größe, Höhe, Breite) usw.
Problem beim Hochladen von Bildern in der Vorschau von js

<<: Beispielanalyse der Suchfunktion von MySQL-regulären Ausdrücken (regexp und rlike)

>>: Implementierung der Remote-Linux-Entwicklung mit vscode