איך להדביק קבצים

הארי תאודולו
הארי תאודולו
Twitter דף הבית

הדבקת קבצים בדפדפן כוללת שימוש באירוע paste של HTMLElement.

נעשה שימוש באירוע paste של HTMLElement

בשלב הראשון, מוסיפים רכיב event listener לאירוע 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);
    }
  });
});