将文件拖放到或粘贴到文本区域

Question

我想做这样的消息输入。

但是我有一个问题如何获取文件数据，我拖放或Ctrl+V 到textarea 上传。为此，我正在使用 Riot.js 和 Symfony。

这是我未完成的代码：

<form method="post" enctype="multipart/form-data" onsubmit="{ handleFileSubmit }">
   <textarea class="form-control" id="message" onpaste="{ handleFilePaste }" required> 
   </textarea>
</form>

handleFilePaste(e) {
  e.preventDefault();
  console.log(e.clipboardData.items);
  console.log(window.navigator.clipboard);
}

但是当我在本地驱动器上复制文件并将其粘贴到文本区域时，上面的 console.log() 没有得到任何文件数据。如果有人知道怎么做或者有好的示例link，请与我分享。

如果可以，请分享拖放示例（重要：输入字段必须是textarea）。

希望得到好评。谢谢。

Answer 1

当我过去不得不做类似的事情时，我没有将事件监听器附加到表单本身，而是附加到 document，如下例所示（您可以执行并粘贴一些东西，它有效），从技术上讲，我不确定它在文本区域上是否同样有效，但它确实适用于文档，你在哪里收听粘贴事件并不重要，因为当你检测到正在粘贴的文件时，你将决定你要做什么.

function handleFilePaste(e) {

  const items = (e.clipboardData || e.originalEvent.clipboardData).items;
  console.log(items);
  
  for (let index in items) {
    const item = items[index];
    if ( item.kind === 'file' ) {
      return item.getAsFile();
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  document.onpaste = function(e){
    const file = handleFilePaste(e);
    console.log(file);
    
    if ( !file ) { return; }
  }
});

<form method="post" enctype="multipart/form-data" onsubmit="{ handleFileSubmit }">
   <textarea class="form-control" id="message" placeholder="Paste something" required></textarea>
</form>

将文件拖放到或粘贴到文本区域

Drop or Paste file on the Textarea

javascript

php

symfony

riot.js