Превью картинок при вставке в поле ввода

Рейтинг: 0Ответов: 2Опубликовано: 21.10.2014

Хочется сделать автоматическую загрузку картинок (превью) при вставке в поле ввода, как это реализовано в соцсетях. Есть ли готовые js библиотеки для таких целей? Хотелось бы, чтобы всё работало максимально кроссбраузерно. Или подскажите, от чего отталкиваться при разработке. Думал сделать это с использованием FileReader(), т.е. считывать картинки из поля ввода, потом обрабатывать и выводить в превью, но оно ведь не работает в сафари 5 и т.д.

Обновление

Ну, drag&drop тоже бы хотелось, но для начала просто преобразовать вставленный урл картинки в миниатюру с возможностью удалить.
Например, пользователь вводит:

https://ru.stackoverflow.com/upfiles/logo.png

ставит пробел, под textarea появляется миниатюра (наверняка видели такой функционал в соцсетях).

javascript jquery изображения
Источник: Stack Overflow на русском

Ответы

▲ 1

То есть возможность drag&drop картинки в поле ввода?

Обновление

Ну так надо отследить событие, например keyup, проверять на наличие ссылки, например /http:/.test(), если такое находит, пишем $("#textarea").after('<img src="ссылка">');

▲ 1

Ну смотрите, сценарий такой:

  1. Пользователь постит ссылку (обновляет поле)
  2. Обработчик видит, что поле обновлено, и пытается найти в нем новые ссылки на изображения
    1. Вычленяет вообще все ссылки
    2. Находит среди них новые
  3. Добавляет под полем теги <img/> для новых изображений.

Последний пункт на самом деле несколько сложнее - по ссылке может оказаться что угодно, и сначала надо убедиться, что по ссылке именно изображение. Скорее всего, можно попробовать загрузить адрес, как обычное изображение и по состоянию элемента определить, всё ли ок, и только после этого показать.