js input 輸入框支持複製粘貼圖片 clipboardData

時間 2021-08-14

標籤 html 服務器 markdown spa code orm htm 圖片欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <textarea id="o"></textarea>
  <img src="" alt="">
  <script>
    var o = document.getElementById('o')
    o.addEventListener('paste', onPaste)
    function onPaste(event) {
      var file = null
      var items = (event.clipboardData || window.clipboardData).items;
      if (items && items.length) {
          for (var i = 0; i < items.length; i++) {
              if (items[i].type.indexOf('image') !== -1) {
                  file = items[i].getAsFile();
                  break;
              }
          }
      }
      if (!file) {
        console.log('粘貼的不是圖片');
        return;
      }
      let e = {
        target: {
          files: [file],
          value: file.name
        }
      }
      // ... 上傳到服務器， 返回圖片地址， 並顯示在須要的位置
    }
  </script>
</body>
</html>
複製代碼