如何拖动图像并在文本区域中显示图像

Question

我有以下文本区域。

<textarea 
    style="width: 440px; height: 331px;" id="charlimit_text_a" name="message" id="droparea"
    placeholder="drag and drop your files here" listener="1" rows="20" cols="60" >
</textarea>

我希望能够将图像拖到文本区域中，并在文本区域中显示图像。

我一直在查看 stackoverflow 问题，但似乎无法找到我正在寻找的答案。 它们都使用 div、容器等，但我们肯定可以只使用文本区域吗？

我希望使用简单的 javascript 并且我使用 PHP 作为我的服务器端语言。

如果有人可以让我朝着正确的方向前进（而不是寻找解决方案），那就太好了。

谢谢。

Answer 1

这是将图像拖到文本区域并显示图像源的示例代码。

 function drag(event) { event.dataTransfer.setData("text", this.event.target.src); } function drop(event) { event.preventDefault(); let data = event.dataTransfer.getData("text"); document.getElementById("display").innerText = document.getElementById("display").value + " " + data; } function allow(event) { event.preventDefault(); }

 <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" draggable="true" ondragstart="drag(event)"> <img src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x_r2.png" draggable="true" ondragstart="drag(event)"> <br /> <br /> Drag above imags here: <textarea id="display" ondrop="drop(event)" ondragover="allow(event)" rows="20" cols="60"></textarea>

更新：

以下示例显示将文件拖入文本区域并显示文件名。

 function drag(event) { event.dataTransfer.setData("text", this.event.target.src); } function drop(event) { event.preventDefault(); let data = event.dataTransfer.files; for (file of data) { document.getElementById("display").innerText = document.getElementById("display").value + " " + file.name; } } function allow(event) { event.preventDefault(); }

 Drag files from your computer here: <textarea id="display" ondrop="drop(event)" ondragover="allow(event)" rows="20" cols="60"></textarea>