Cara menempelkan file

Harry Theodoulou
Harry Theodoulou

Menempelkan file ke browser mencakup penggunaan peristiwa paste dari HTMLElement.

Menggunakan peristiwa paste HTMLElement

Sebagai langkah pertama, Anda menambahkan pemroses peristiwa untuk peristiwa paste di elemen yang diinginkan, biasanya berada pada level document sehingga tidak ada elemen khusus yang perlu difokuskan. Selanjutnya, gunakan Clipboard API, yang memberi Anda akses ke kolom clipboardData dari peristiwa paste HTMLElement, yang daftar files-nya kemudian dapat Anda iterasi. Berdasarkan jenis MIME setiap file yang ditempel, Anda dapat memutuskan apakah akan merendernya ke layar, seperti pada gambar atau video, atau menempelkan konten teks file ke, misalnya, elemen textarea, dalam kasus file teks.

Dukungan Browser

  • 66
  • 79
  • 63
  • 13,1

Sumber

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

Bacaan lebih lanjut

Demo

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