نحوه چسباندن فایل ها

Harry Theodoulou
LinkedIn

چسباندن فایل ها در مرورگر شامل استفاده از رویداد paste HTMLElement است.

با استفاده از رویداد paste HTMLElement

به عنوان اولین گام، شنونده رویداد برای رویداد paste در عنصر مورد نظر اضافه می‌کنید، معمولاً این در سطح document است، بنابراین هیچ عنصر خاصی نیاز به تمرکز ندارد. در مرحله بعد، از Clipboard API استفاده می‌کنید که به شما امکان دسترسی به فیلد clipboardData رویداد paste HTMLElement را می‌دهد، که لیست files آن را می‌توانید سپس دوباره تکرار کنید. بر اساس نوع MIME هر یک از فایل‌های جای‌گذاری شده، می‌توانید تصمیم بگیرید که آن را روی صفحه نمایش دهید، مانند تصویر یا ویدیو، یا محتوای متنی فایل را مثلاً در یک عنصر textarea جای‌گذاری کنید. ، در مورد یک فایل متنی.

پشتیبانی مرورگر

  • 66
  • 79
  • 63
  • 13.1

منبع

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

بیشتر خواندن

نسخه ی نمایشی

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