วิธีวางไฟล์

แฮร์รี่ ธีโอดูลู
Harry Theodoulou
Twitter หน้าแรก

การวางไฟล์ลงในเบราว์เซอร์ประกอบด้วยการใช้เหตุการณ์ paste ของ HTMLElement

กำลังใช้เหตุการณ์ paste ของ HTMLElement

ในขั้นตอนแรก ให้เพิ่ม Listener เหตุการณ์สำหรับเหตุการณ์ paste ในองค์ประกอบที่ต้องการ ซึ่งโดยทั่วไปจะอยู่ที่ระดับ document จึงไม่จำเป็นต้องโฟกัสองค์ประกอบที่เฉพาะเจาะจง ขั้นตอนต่อไปให้ใช้ 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);
    }
  });
});