Jak wklejać pliki

Harry Teodoulou
Harry Theodoulou

Wklejanie plików w przeglądarce polega na użyciu zdarzenia paste typu HTMLElement.

Pierwszym krokiem jest dodanie odbiornika dla zdarzenia paste w wybranym elemencie, zwykle na poziomie document, więc nie musisz zaznaczać żadnego konkretnego elementu. Następnie używasz interfejsu Clipboard API, który zapewnia dostęp do pola clipboardData zdarzenia paste w elemencie HTMLElement. Jego listę files możesz potem powielać. Na podstawie typu MIME każdego wklejonego pliku możesz zdecydować, czy wyrenderować go na ekranie, jak w przypadku obrazu lub filmu, czy wkleić zawartość tekstową pliku, np. do elementu textarea (w przypadku pliku tekstowego).

Obsługa przeglądarek

  • 66
  • 79
  • 63
  • 13.1

Źródło

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

Więcej informacji

Prezentacja

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

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

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