Implementieren der Dateieingabe per Kopieren und Einfügen im Web-js-Tutorial-php.cn

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy-Paste File Input</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div 
        id="pasteArea" 
        contenteditable="true" 
        style="border: 2px dashed #ccc; padding: 20px;"
    >
        Paste your file here
    </div>
    <div id="preview"></div>
    <script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Implementing File Input By Copy-Paste on the Web

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 vom DOM zum Anhängen des Ereignis-Listeners erhalten, 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) => {

    });
});

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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. Jetzt können wir die URL verwenden, um die Datei anzuzeigen.

Assuming the user pasted image files, the following code snippet shows how we can extend the event handler to create a URL and display the image file.

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

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

Nach dem Login kopieren

In the code snippet above, we get the preview container from the DOM and create an img element for rendering the image. We assign the created URL as the src of the image and append the image to the preview container. Once the image is appended to the preview container, the user can now know that the image they pasted was successfully loaded into the web page.

Success! We have successfully implemented file uploads by copy-paste on a webpage. This method of file upload gives users the privilege of uploading files easily without the need to click several buttons to select the file to be uploaded. The ClipboadEvent interface provides an easy way to collect data from items pasted on the browser. The FileReader interface allows us to create a URL from the uploaded file and use it to preview the uploaded file.

Feel free to say something in the comment section. Find more about the ClipBoardEvent and the FileReader interfaces from MDN.

Das obige ist der detaillierte Inhalt vonImplementieren der Dateieingabe per Kopieren und Einfügen im Web. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!