[英]HTML Paste Clipboard Image to File Input
Okay, here it goes.好的,就到这里了。 I have seen the great ways in which one can now paste images to WhatsApp web chats.我已经看到了人们现在可以将图像粘贴到 WhatsApp 网络聊天的好方法。 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 ?大多数示例使用画布来捕获粘贴的剪贴板图像,如何仅使用 Ctrl + V 在页面上的任何位置将其粘贴到文件输入中?
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>
It's pretty straightforward.这很简单。 Just catch paste
event on window
object and put all the files you got from it to the <input>
tag.只需在window
对象上捕获paste
事件并将您从中获得的所有文件放到<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>
Work well干得好
<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 Output: var_dump($_FILES); 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
我只是想添加上面的示例代码才能工作,实际上我必须将 enctype="multipart/form-data" 属性添加到表单元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.