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>

Answer 2

好好工作

<form action="abc.php" method="post" enctype="multipart/form-data">
  <div class="actions"><input type="submit" name="commit" value="Submit" /></div>
  <input type="file" name="aaa"/>
</form>
  
 <script type="text/javascript">
//e.originalEvent.clipboardData.files
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;
}); 
 </script>

PHP 输出：var_dump($_FILES);

array (size=1)
  'aaa' => 
    array (size=5)
      'name' => string 'image.png' (length=9)
      'type' => string 'image/png' (length=9)
      'tmp_name' => string 'C:\wamp64\tmp\phpF6AF.tmp' (length=25)
      'error' => int 0
      'size' => int 9380

Answer 3

我只是想为上面的示例代码添加它，我实际上必须向表单元素添加 enctype="multipart/form-data" 属性。

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

3 个答案: