Три начина за поддръжка на вмъкване на изображения в полето за въвеждане от разработчици
Имаше обаче още едно усложнение: поради ограниченията на браузъра изображенията не можеха да бъдат вмъкнати директно в тялото на писмото. Картината трябваше да се запише на вашия компютър и да се прикачи към писмото оттам, както всеки друг файл.
Отдавна обмисляме този проблем. Беше възможно да се използва java аплет или флаш, но тези решения имаха значителни ограничения. Например, когато използвате java аплет, ще е необходимо да разрешите на аплета да работи в браузъра. В резултат на това решихме да използваме новите функции на съвременните браузъри, като Clipboard API, File API и Drag n Drop.
Прочетете нашата публикация за това как да вмъкнете снимки от клипборда или публичен URL адрес в имейл и как да ги добавите към тялото на имейла с просто плъзгане и пускане от работния плот.
Поставяне на снимки от клипборда
Доскоро пълната работа с клипборда в уеб приложенията изглеждаше невъзможна. Но тогава имаше нов API, специално проектиран точно за това (API на клипборда). Това е интерфейс за работа с данни от клипборда при копиране, изрязване и поставяне. Интерфейсът е доста универсален и работи не само с текстови данни, но и с файлове в различни формати. Но, както обикновено се случва, не се поддържа от всички браузъри и в различна степен.
Chrome (от версия 18) и Yandex.Browser имат достъп до снимки в клипборда при поставяне. Прави се така:
В допълнение към браузърите, базирани на двигателя WebKit, поставянето на картини от клипборда работи и във Firefox: там картините в designMode веднага се вмъкват в data: uri.
Вмъкване на изображения чрез публичен URL адрес
Един от най-простите и познатидействия - копирайте снимка от страница в интернет и я поставете в писмо - не се поддържа от браузърите по подразбиране. В Safari 5+ обектът clipboardData няма свойство items, но има масив типове, съдържащ типовете информация за копиране. И ако копираното изображение вече е в интернет на публичен URL адрес, тогава то също може да бъде вмъкнато. Когато вмъквате изображения обикновено в designMode, Safari създава img елемент с фалшива стойност на атрибут src (webkit-fake-url://416873AC. ). Този ресурс не може да бъде достъпен от JS по никакъв начин, следователно, за да не бъде вмъкнато фалшивото изображение, трябва да направите preventDefault на обекта на събитието.
Вграждането на публичен URL работи по подразбиране в IE9 и по-нови версии.
Поставете чрез плъзгане и пускане
В допълнение към директното копиране на изображения от клипборда или от публичен URL адрес, някои браузъри имат възможност да вмъкват изображения чрез плъзгане и пускане. Това е много удобно, защото можете да добавите няколко снимки към писмото наведнъж.
Това работи във Firefox, Safari 5.1+, Chrome и Yandex.Browser.