ホームページ > 記事 > ウェブフロントエンド > Web上でコピペによるファイル入力を実現する
Web上でコピペによるファイル入力を実現する
- WBOYオリジナル
- 2024-07-18 16:44:37868ブラウズ
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;
}
上記のマークアップとスタイル シートは、以下のスクリーンショットに示すように、単純なプロンプト テキストを含む単純なダッシュで囲まれたコンテナーを作成します。
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 サイトの他の関連記事を参照してください。