как перетащить изображение и отобразить изображение в текстовой области

ProgramBox

как перетащить изображение и отобразить изображение в текстовой области

Post author:admin
Запись опубликована:15 декабря, 2022
Post category:Вопросы по программированию

#javascript #php #html

#javascript #php #HTML

Вопрос:

У меня есть следующая текстовая область.

 <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, но, похоже, не могу найти ответ на то, что я ищу. Все они используют divs, контейнеры и т. Д. Но, конечно, мы можем просто использовать текстовую область?

Я хочу использовать простой javascript, и я использую PHP в качестве языка на стороне сервера.

Если кто-нибудь может направить меня в правильном направлении (не ища решения), это было бы здорово.

Спасибо.

1. Текстовая область предназначена для текста, а не для изображений. Оставьте функцию перетаскивания, я сомневаюсь, что вы можете отображать изображения в текстовой области вообще. Мое предложение состояло бы в том, чтобы использовать div contentEditable атрибут with с значением true, чтобы придать текстовой области внешний вид и функциональность, а затем использовать в div качестве цели для удаления изображений.

2. @fiveelements, okay сделает это

3. @fiveelements есть ли способ хотя бы перетащить изображение в текстовую область и вместо отображения изображения указать только путь к изображению? т.е. image.jpg ?

4. Да, путь к изображению или альтернативный текст и т. Д. Могут отображаться в текстовой области.

5. @fiveelements Как я могу добиться этого?

Ответ №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>

Развернуть фрагмент

1. Я не получаю путь, я просто получаю миниатюру изображения, когда изображение не найдено

2. Только что понял ваш код. Я имел в виду внешнее перетаскивание изображения в текстовую область. Итак, если я перетаскиваю изображение из своих папок в текстовую область.

3. Изменен тот же пример, чтобы разрешить удаление файлов из файловой системы.

4. это хорошо работает, спасибо. Хотя я не могу перетащить его вместе с другим текстом. Это работает только в том случае, если первым событием в текстовой области является событие drop. Если я напишу текст, а затем удалю изображение, оно не сработает. Это проблема с перезапуском события?

5. Итак, последняя проблема, с которой я сталкиваюсь, заключается в том, что когда текст находится внутри текстовой области, перетаскивание не работает? Что я планирую сделать, так это то, что пользователь может нажать кнопку для вставки <img src=""> , а затем пользователь может перетащить путь к изображению в кавычки. Так что это будет выглядеть <img src="image.png">