Bạn có thể dán các tệp vào trình duyệt bằng cách sử dụng sự kiện paste của HTMLElement.
Sử dụng sự kiện paste của HTMLElement
Bước đầu tiên, bạn sẽ thêm trình nghe sự kiện cho sự kiện paste ở phần tử mong muốn, thường là ở cấp document, vì vậy không cần tập trung vào phần tử cụ thể nào. Tiếp theo, bạn sẽ sử dụng Clipboard API để truy cập vào trường clipboardData của sự kiện paste của HTMLElement. API này có danh sách files mà bạn có thể lặp lại. Dựa trên loại MIME của từng tệp đã dán, bạn có thể quyết định xem có hiển thị tệp đó lên màn hình (như trong trường hợp hình ảnh hoặc video) hay không hoặc dán nội dung văn bản của tệp vào (ví dụ: phần tử textarea trong trường hợp là tệp văn bản).
document.addEventListener('paste', async (e) => {
// Prevent the default behavior, so you can code your own logic.
e.preventDefault();
if (!e.clipboardData.files.length) {
return;
}
// Iterate over all pasted files.
Array.from(e.clipboardData.files).forEach(async (file) => {
// Add more checks here for MIME types you're interested in,
// such as `application/pdf`, `video/mp4`, etc.
if (file.type.startsWith('image/')) {
// For images, create an image and append it to the `body`.
const img = document.createElement('img');
const blob = URL.createObjectURL(file);
img.src = blob;
document.body.append(img);
} else if (file.type.startsWith('text/')) {
// For text files, read the contents and output it into a `textarea`.
const textarea = document.createElement('textarea');
textarea.value = await file.text();
document.body.append(textarea);
}
});
});
Tài liệu đọc thêm
Bản minh họa
HTML
<!DOCTYPE html>
<html>
<head>
<title>How to paste files</title>
</head>
<body>
<h1>How to paste files</h1>
<p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
(for other operating systems) to paste image or text file(s) anywhere in this page.
</p>
</body>
</html>CSS
html {
box-sizing: border-box;
font-family: system-ui, sans-serif;
color-scheme: dark light;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 1rem;
}
img {
height: auto;
max-width: 100%;
display: block;
}
JS
document.addEventListener('paste', async (e) => {
// Prevent the default behavior, so you can code your own logic.
e.preventDefault();
if (!e.clipboardData.files.length) {
return;
}
// Iterate over all pasted files.
Array.from(e.clipboardData.files).forEach(async (file) => {
// Add more checks here for MIME types you're interested in,
// such as `application/pdf`, `video/mp4`, etc.
if (file.type.startsWith('image/')) {
// For images, create an image and append it to the `body`.
const img = document.createElement('img');
const blob = URL.createObjectURL(file);
img.src = blob;
document.body.append(img);
} else if (file.type.startsWith('text/')) {
// For text files, read the contents and output it into a `textarea`.
const textarea = document.createElement('textarea');
textarea.value = await file.text();
document.body.append(textarea);
}
});
});