كيفية لصق الملفات

هاري ثيودولو
هاري ثيودولو
Twitter الصفحة الرئيسية

يتألف لصق الملفات في المتصفِّح من استخدام حدث paste من HTMLElement.

استخدام حدث paste لـ HTMLElement

كخطوة أولى، يمكنك إضافة أداة معالجة حدث للحدث paste في العنصر المطلوب، ويكون ذلك عادةً على مستوى document، وبالتالي لا حاجة إلى التركيز على عنصر محدّد. بعد ذلك، يمكنك استخدام Clipboard API التي تتيح لك الوصول إلى الحقل clipboardData في حدث paste الخاص بـ HTMLElement، حيث يمكنك بعد ذلك تكرار قائمة files. استنادًا إلى نوع MIME لكل ملف من الملفات التي يتم لصقها، يمكنك تحديد ما إذا كنت تريد عرضه على الشاشة، كما في حالة الصورة أو الفيديو، أو لصق المحتوى النصي للملف في عنصر textarea مثلاً، في ملف نصي.

التوافق مع المتصفح

  • 66
  • 79
  • 63
  • 13

المصدر

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