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

هری تئودولو

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

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

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

Browser Support

  • کروم: ۶۶.
  • لبه: ۷۹.
  • فایرفاکس: ۶۳.
  • سافاری: ۱۳.۱.

Source

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

مطالعه بیشتر

نسخه آزمایشی

اچ‌تی‌ام‌ال 

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