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

本文介绍了HTML粘贴剪贴板图像到文件输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Okay, here it goes. I have seen the great ways in which one can now paste images to WhatsApp web chats. Most examples use a canvas to capture the pasted clipboard image, how does one paste it to a File Input using only Ctrl + V anywhere on the page?

以下是我输入的代码，只要有人选择了文件就会自动提交：

Here is the code I have for the input which automatically submits as soon as someone selected a file:

      <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>

推荐答案

这非常简单。只需在窗口对象上捕获粘贴事件，并将从中获取的所有文件放到 < input> tag。

It's pretty straightforward. Just catch paste event on window object and put all the files you got from it to the <input> tag.

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>

这篇关于HTML粘贴剪贴板图像到文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！