Web上でコピペによるファイル入力を実現する-jsチュートリアル-php.cn

Web 開発の分野では、ユーザー入力を収集するときにファイルをアップロードする方法が複数あります。方法の 1 つはコピー＆ペーストです。ファイル入力のためのコピー＆ペーストは、ユーザーからファイルをアップロードする非常に直感的な方法です。コピー＆ペーストのファイル入力方法により、ユーザーはアップロードするファイルの場所を記憶する必要がなくなります。この記事では、Web サイトにコピー＆ペーストによるファイル入力を実装する方法について説明します。

ClipboadEvent インターフェイスと EventTarget インターフェイスを利用して、コピー＆ペーストのファイル入力を実装します。 ClipboardEvent インターフェイスは貼り付けイベントに関する情報を提供し、EventTarget インターフェイスを使用すると貼り付けイベントをリッスンできます。

貼り付けイベントをリッスンしながら、貼り付けたアイテムをどう処理するかを決定するイベントハンドラー関数をアタッチします。この例では、貼り付けたファイルを取得し、ブラウザに完全に読み込まれた後、即座にレンダリングします。 HTML とスタイルから始めます。

HTML とスタイル

貼り付け領域の HTML マークアップを作成することから始めましょう。以下のコードスニペットは 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>

ログイン後にコピー

上記のコードスニペットは、ファイルを貼り付けることができる長方形のコンテナーをレンダリングします。コンテナーには、true に設定された contenteditable という属性があります。 contenteditable 属性は、コンテナ内でファイルやその他のアイテムを貼り付けることができるようにするために重要です。 contenteditable 属性が false に変更されるか削除されると、貼り付けアクションは期待どおりに機能しなくなります。プレビューという ID を持つコンテナーもあります。プレビューコンテナを使用して、ユーザーが貼り付けた画像をプレビューします。

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

ログイン後にコピー

上記のマークアップとスタイルシートは、以下のスクリーンショットに示すように、単純なプロンプトテキストを含む単純なダッシュで囲まれたコンテナーを作成します。

Implementing File Input By Copy-Paste on the Web

UI を作成したので、次のセクションで JavaScript を使用して便利な機能を追加しましょう。

スクリプト

このセクションでは、JavaScript を使用して、貼り付けエリアに貼り付けイベントリスナーを追加します。イベントリスナーをアタッチするために DOM から貼り付け領域を取得する前に、以下のコードスニペットのように、まず DOM コンテンツがロードされるのを待ちます。

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

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

    });
});

ログイン後にコピー

上記のコードスニペットでは、DOMContentLoaded イベントのリスナーを追加しました。これにより、DOM 要素を取得する前に、DOM ツリーが作成されるのを待つことができます。次に、貼り付け領域コンテナーを選択し、貼り付けイベントリスナーをそれに追加します。

貼り付けたアイテムからファイルを取得する

前のコードスニペットでは、貼り付けイベントハンドラーが実装されていませんでした。イベントオブジェクトからデータを取得し、コンソールに記録することで実装してみましょう。データについてはこの記事の後半でさらに詳しく説明しますが、今のところは、項目が貼り付け領域に貼り付けられたときにファイルが確実に受信されるようにするだけです。以下のコードスニペットは、貼り付けイベントハンドラーの最小限の実装を示しています。

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

ログイン後にコピー

上記のコードスニペットでは、event.clipboardData オブジェクトから項目を取得します。 event.clipboardData.items は、貼り付けられた項目のコンテンツを含むリストのようなオブジェクトである DataTransferItemList です。ユーザーは複数の項目を一度にコピーして貼り付けることができるため、項目はリストに保存されます。

次に、for ...of ループを使用して項目を繰り返します。ループ内で、各項目がファイルであるかどうかを確認します。アイテムがキング「ファイル」の場合、それをファイルとして取得し、ブラウザのコンソールに出力します。

コンソールにファイル情報を出力することは、Web ページのユーザーにとってあまり役に立ちません。次のセクションではもう少し面白いことをやってみましょう。

アップロードされたファイルをプレビューする

クリップボードにアイテムを貼り付けた後、ファイルのアップロードが成功したことをどこにも表示しないと、ユーザーはそれを知るのが難しくなります。成功を示す何かを表示して、ファイルが正常にアップロードされたことを示すことが重要です。アップロードの成功を示すために、アップロードされたファイル自体を表示するより良い方法はあるでしょうか?

このセクションでは、ペーストイベントハンドラーを拡張して、受信したファイルから URL を作成します。ファイルがブラウザに読み込まれたら、作成された URL を使用してファイルをレンダリングします。以下のスニペットにコードされているように、FileReader API を利用してファイルから URL を作成します。

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

ログイン後にコピー

上記のコードスニペットでは、FileReader のインスタンスを作成し、それを使用してデータ URL を生成しました。また、loadend イベントリスナーを FileReader オブジェクトに追加し、読み取りの結果をコンソールに記録します。これはファイルをプレビューするための最初のステップです。URL を使用してファイルを表示できるようになります。

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.

以上がWeb上でコピペによるファイル入力を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。