HTML将剪贴板图像粘贴到文件输入

Question

好的，到这里了。我已经看到了现在可以将图像粘贴到WhatsApp网络聊天中的绝佳方法。大多数示例都使用画布捕获粘贴的剪贴板图像，如何仅使用Ctrl + V将其粘贴到文件输入页面上的任何位置？

这是我输入的代码，一旦有人选择文件，该代码就会自动提交：

      <form id="new_document_attachment" method="post">
            <div class="actions"><input type="submit" name="commit" value="Submit" /></div>
                <input type="file" id="document_attachment_doc" />
      </form>
      <script>
          document.getElementById("document_attachment_doc").onchange = function() {
          document.getElementById("new_document_attachment").submit();
        };
      </script>

Answer 1

这很简单。只需paste在window对象上捕获事件，然后将从该对象获得的所有文件放入<input>标签即可。

const form = document.getElementById("new_document_attachment");
const fileInput = document.getElementById("document_attachment_doc");

fileInput.addEventListener('change', () => {
  form.submit();
});

window.addEventListener('paste', e => {
  fileInput.files = e.clipboardData.files;
});

<form id="new_document_attachment" method="post">
  <div class="actions"><input type="submit" name="commit" value="Submit" /></div>
  <input type="file" id="document_attachment_doc" />
</form>