Im Bereich der Webentwicklung gibt es beim Sammeln von Benutzereingaben mehrere Möglichkeiten, Dateien hochzuladen. Eine der Methoden ist Kopieren und Einfügen. Kopieren und Einfügen für die Dateieingabe ist eine sehr intuitive Methode zum Hochladen von Dateien von Benutzern. Die Dateieingabemethode „Kopieren und Einfügen“ erspart Benutzern die Notwendigkeit, sich den Speicherort der Datei zu merken, die sie hochladen möchten. In diesem Artikel besprechen wir, wie Sie die Dateieingabe per Kopieren und Einfügen auf Ihrer Website implementieren können.

Wir werden die Dateieingabe durch Kopieren und Einfügen implementieren, indem wir die Schnittstellen ClipboadEvent und EventTarget nutzen. Die ClipboardEvent-Schnittstelle stellt Informationen über das Einfügeereignis bereit und die EventTarget-Schnittstelle ermöglicht es uns, das Einfügeereignis abzuhören.

Während wir das Paste-Ereignis abhören, fügen wir eine Event-Handler-Funktion hinzu, mit der wir entscheiden, was mit den eingefügten Elementen geschehen soll. In unserem Fall nehmen wir die eingefügte Datei und rendern sie sofort, nachdem sie vollständig in den Browser geladen wurde. Wir beginnen mit dem HTML und den Stilen.

Das HTML und die Stile

Beginnen wir mit der Erstellung des HTML-Markups des Einfügebereichs. Der folgende Codeausschnitt ist das HTML-Markup:

    
    
    
    


    

        Paste your file here
    
    

    

Der obige Codeausschnitt stellt einen rechteckigen Container dar, in den wir Dateien einfügen können. Der Container verfügt über ein Attribut namens contenteditable, das auf „true“ gesetzt ist. Das contenteditable-Attribut ist wichtig, um das Einfügen von Dateien oder anderen Elementen im Container zu ermöglichen. Wenn das contenteditable-Attribut in „false“ geändert oder entfernt wird, funktioniert die Einfügeaktion nicht wie erwartet. Wir haben auch einen Container mit der ID „Vorschau“. Wir verwenden den Vorschaucontainer, um eine Vorschau des vom Benutzer eingefügten Bildes anzuzeigen.

Fügen wir unserem Markup aus style.css ein paar grundlegende Stile hinzu

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

Das obige Markup und Stylesheet erstellt einen einfachen Container mit Bindestrich-Umrandung und einem einfachen Eingabeaufforderungstext, wie im Screenshot unten gezeigt:

Da wir nun die Benutzeroberfläche erstellt haben, fügen wir im nächsten Abschnitt einige nützliche Funktionen mit JavaScript hinzu.

Das Drehbuch

In diesem Abschnitt verwenden wir JavaScript, um einen Einfüge-Ereignis-Listener zum Einfügebereich hinzuzufügen. Bevor wir den Einfügebereich aus dem DOM erhalten, um den Ereignis-Listener anzuhängen, warten wir zunächst darauf, dass der DOM-Inhalt geladen wird, wie im Code-Snippet unten.

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

Im obigen Codeausschnitt haben wir einen Listener für das DOMContentLoaded-Ereignis hinzugefügt. Dadurch können wir warten, bis der DOM-Baum erstellt wurde, bevor wir die DOM-Elemente abrufen können. Als nächstes wählen wir den Einfügebereichscontainer aus und hängen einen Einfügeereignis-Listener daran an.

Abrufen der Datei aus den eingefügten Elementen

Der Paste-Event-Handler wurde im vorherigen Code-Snippet nicht implementiert. Lassen Sie uns es implementieren, indem wir die Daten vom Ereignisobjekt abrufen und sie in der Konsole protokollieren. Wir werden später in diesem Artikel mehr mit den Daten machen, zunächst wollen wir nur sicherstellen, dass die Dateien empfangen werden, wenn Elemente in den Einfügebereich eingefügt werden. Der folgende Codeausschnitt zeigt die minimale Implementierung des Paste-Event-Handlers.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

Im obigen Codeausschnitt erhalten wir Elemente aus dem event.clipboardData-Objekt. Die event.clipboardData.items ist eine DataTransferItemList, ein listenartiges Objekt, das den Inhalt der eingefügten Elemente enthält. Die Elemente werden in einer Liste gespeichert, da ein Benutzer mehrere Elemente gleichzeitig kopieren und einfügen kann.

Als nächstes durchlaufen wir die Elemente mithilfe der for ...of-Schleife. In der Schleife prüfen wir, ob es sich bei jedem der Elemente um eine Datei handelt. Wenn es sich bei dem Element um eine King-Datei handelt, erhalten wir es als Datei und drucken es auf der Konsole des Browsers aus.

Das Drucken der Dateiinformationen auf der Konsole ist für die Benutzer Ihrer Webseite nicht sehr nützlich. Lassen Sie uns im nächsten Abschnitt etwas Interessanteres tun.

Vorschau der hochgeladenen Datei

Es wäre für einen Benutzer schwer zu wissen, dass der Datei-Upload erfolgreich war, nachdem er die Elemente für die Zwischenablage eingefügt hat, wenn wir ihn nirgendwo anzeigen. Es ist wichtig, anzuzeigen, dass die Datei erfolgreich hochgeladen wurde, indem etwas angezeigt wird, das den Erfolg anzeigt. Gibt es eine bessere Möglichkeit, den Erfolg eines Uploads anzuzeigen, als die hochgeladene Datei selbst anzuzeigen?

In diesem Abschnitt erweitern wir den Paste-Event-Handler, um eine URL aus der empfangenen Datei zu erstellen. Wir werden die erstellte URL verwenden, um die Datei zu rendern, sobald sie in den Browser geladen ist. Wir werden die FileReader-API nutzen, um eine URL aus der Datei zu erstellen, wie im folgenden Snippet codiert.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

Im obigen Codeausschnitt haben wir eine Instanz des FileReader erstellt und diese zum Generieren der Daten-URL verwendet. Wir haben außerdem einen Loadend-Ereignis-Listener an das FileReader-Objekt angehängt, mit dem wir das Ergebnis des Lesevorgangs in der Konsole protokollieren. Dies ist der erste Schritt zur Vorschau der Datei. Wir können nun die URL verwenden, um die Datei anzuzeigen.

Angenommen, der Benutzer hat Bilddateien eingefügt, zeigt das folgende Codefragment, wie wir den Ereignishandler erweitern können, um eine URL zu erstellen und die Bilddatei anzuzeigen.

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

Im obigen Codeausschnitt rufen wir den Vorschaucontainer aus dem DOM ab und erstellen ein img-Element zum Rendern des Bildes. Wir weisen die erstellte URL als Quelle des Bildes zu und hängen das Bild an den Vorschaucontainer an. Sobald das Bild an den Vorschaucontainer angehängt ist, kann der Benutzer nun wissen, dass das von ihm eingefügte Bild erfolgreich in die Webseite geladen wurde.

Erfolg! Wir haben Datei-Uploads per Copy-Paste erfolgreich auf einer Webseite implementiert. Diese Methode des Datei-Uploads gibt Benutzern die Möglichkeit, Dateien einfach hochzuladen, ohne auf mehrere Schaltflächen klicken zu müssen, um die hochzuladende Datei auszuwählen. Die ClipboadEvent-Schnittstelle bietet eine einfache Möglichkeit, Daten von im Browser eingefügten Elementen zu sammeln. Die FileReader-Schnittstelle ermöglicht es uns, eine URL aus der hochgeladenen Datei zu erstellen und diese zur Vorschau der hochgeladenen Datei zu verwenden.

Sie können gerne etwas im Kommentarbereich sagen. Erfahren Sie mehr über die ClipBoardEvent- und FileReader-Schnittstellen von MDN.