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>
复制代码