Maison >interface Web >js tutoriel >Implémentation de la saisie de fichiers par copier-coller sur le Web

Implémentation de la saisie de fichiers par copier-coller sur le Web

WBOYoriginal: 2024-07-18 16:44:37945parcourir

Dans le domaine du développement Web, il existe plusieurs façons de télécharger des fichiers lors de la collecte des commentaires des utilisateurs. L'une des méthodes est le copier-coller. Le copier-coller pour la saisie de fichiers est une méthode très intuitive de téléchargement de fichiers par les utilisateurs. La méthode de saisie de fichier copier-coller évite aux utilisateurs d'avoir à mémoriser l'emplacement du fichier qu'ils souhaitent télécharger. Dans cet article, nous verrons comment vous pouvez implémenter la saisie de fichiers par copier-coller sur votre site Web.

Nous implémenterons la saisie du fichier copier-coller en profitant des interfaces ClipboadEvent et EventTarget. L'interface ClipboardEvent fournit des informations sur l'événement coller, et l'interface EventTarget nous permet d'écouter l'événement coller.

Pendant l'écoute de l'événement coller, nous attacherons une fonction de gestionnaire d'événements où nous déciderons quoi faire avec les éléments collés. Dans notre cas, nous prendrons le fichier collé et le rendrons instantanément une fois qu'il sera complètement chargé dans le navigateur. Nous commencerons par le HTML et les styles.

Le HTML et les styles

Commençons par créer le balisage HTML de la zone de collage. L'extrait de code ci-dessous est le balisage HTML :

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

L'extrait de code ci-dessus affiche un conteneur rectangulaire dans lequel nous pourrons coller des fichiers. Le conteneur a un attribut appelé contenteditable défini sur true. L'attribut contenteditable est important pour permettre le collage de fichiers ou de tout autre élément dans le conteneur. Si l'attribut contenteditable est remplacé par false ou supprimé, l'action de collage ne fonctionnera pas comme prévu. Nous avons également un conteneur avec l'identifiant d'aperçu. Nous utiliserons le conteneur d'aperçu pour prévisualiser l'image collée par l'utilisateur.

Ajoutons quelques styles de base à notre balisage à partir de style.css

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

Le balisage et la feuille de style ci-dessus créent un simple conteneur bordé de tirets avec un simple texte d'invite, comme indiqué dans la capture d'écran ci-dessous :

Implementing File Input By Copy-Paste on the Web

Maintenant que nous avons créé l'interface utilisateur, ajoutons quelques fonctionnalités utiles avec JavaScript dans la section suivante.

Le scénario

Dans cette section, nous utiliserons JavaScript pour ajouter un écouteur d'événement de collage à la zone de collage. Avant d'obtenir la zone de collage du DOM pour attacher l'écouteur d'événement, nous attendons d'abord que le contenu du DOM soit chargé comme dans l'extrait de code ci-dessous.

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

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

    });
});

Dans l'extrait de code ci-dessus, nous avons ajouté un écouteur pour l'événement DOMContentLoaded. Cela nous permet d'attendre que l'arborescence DOM soit créée avant de pouvoir récupérer les éléments DOM. Ensuite, nous sélectionnons le conteneur de la zone de collage et y ajoutons un écouteur d'événement de collage.

Récupérer le fichier à partir des éléments collés

Le gestionnaire d'événements Paste n'a pas été implémenté dans l'extrait de code précédent. Implémentons-le en récupérant les données de l'objet événement et en les enregistrant dans la console. Nous en ferons plus avec les données plus loin dans l'article. Pour l'instant, nous voulons simplement nous assurer que les fichiers sont reçus lorsque les éléments sont collés dans la zone de collage. L'extrait de code ci-dessous montre l'implémentation minimale du gestionnaire d'événements Paste.

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

Dans l'extrait de code ci-dessus, nous obtenons des éléments de l'objet event.clipboardData. event.clipboardData.items est un DataTransferItemList qui est un objet de type liste contenant le contenu des éléments collés. Les éléments sont stockés dans une liste car il est possible pour un utilisateur de copier et coller plusieurs éléments à la fois.

Ensuite, nous parcourons les éléments en utilisant la boucle for ...of. Dans la boucle, on vérifie si chacun des éléments est un fichier. Si l'élément est du « fichier » roi, nous l'obtenons sous forme de fichier et l'imprimons sur la console du navigateur.

Imprimer les informations du fichier sur la console n'est pas très utile aux utilisateurs de votre page web. Faisons quelque chose d'un peu plus intéressant dans la section suivante.

Aperçu du fichier téléchargé

Il serait difficile pour un utilisateur de savoir que le téléchargement du fichier a réussi après avoir collé les éléments du presse-papiers si nous ne l'affichons nulle part. Il est important d'indiquer que le fichier a été téléchargé avec succès en affichant quelque chose qui indique le succès. Quelle meilleure façon d'indiquer le succès d'un téléchargement que d'afficher le fichier téléchargé lui-même ?

Dans cette section, nous allons étendre le gestionnaire d'événements Paste pour créer une URL à partir du fichier reçu. Nous utiliserons l'URL créée pour restituer le fichier une fois qu'il sera chargé dans le navigateur. Nous profiterons de l'API FileReader pour créer une URL à partir du fichier comme codé dans l'extrait ci-dessous.

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

Dans l'extrait de code ci-dessus, nous avons créé une instance de FileReader et l'avons utilisée pour générer l'URL des données. Nous avons également ajouté un écouteur d'événement Loadend à l'objet FileReader où nous enregistrons le résultat de la lecture sur la console. C'est la première étape vers la prévisualisation du fichier, nous pouvons maintenant utiliser l'URL pour afficher le fichier.

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

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html dash print Object if for while select Logging using Interface Attribute Event append copy console function dom this location display input ui prompt

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Site d'achatArticle suivant：Site d'achat

Articles Liés

Voir plus