0

我有以下文本区域。

<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 作为我的服务器端语言。

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

谢谢。

4

1 回答 1

0

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

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>

于 2021-02-04T05:53:28.690 回答