|
0 Всего найдено: 1
dr5y51em
Сообщение
03/08/2011 11:41
Копия темы
0
Вывод изображения при помощи Drag&Drop сразу в браузер. (HTML5) На дворе 21 век, браузеры становятся всё функциональнее, web приложения всё более похожи на десктопные, а пользователи всё ленивее :). И так, хотел бы рассказать о своём опыте, JS программирования объектов HTML5, для работы с Drag&Drop файлов в окно браузера. К сожалению информации по данному вопросу, пока что практически нет. То, что есть приходиться собирать по крупицам и как правило с англоязычных сайтов, спецификаций браузеров, вытаскивать из JS консолей и т.д. И так. В спецификации HTML5 предусмотрены новые события для компонентов DOM дерева, это события DragEnter, DragOver, DragLeave, DragDrop которые срабатывают при взаимодействии указателя, с перетаскиваемым объектом над элементом. Эти события нам и следует обрабатывать. Перво на перво, нужно проверить, позволяет ли браузер работать с этими событиями, если такая возможность есть, то отлавливаем их. Навешиваем на события свои функции, в которые в качестве параметра нам передаются данные о событии. Всё это можно расписывать очень долго, но лучше посмотрите прикреплённый файл, это JS объект, позволяющий работать с Drag&Drop. Вот таким образом он инициализирует свою работу mbDragDrop.init(document.getElementById('myDiv'),Enter,Over,Leave,Drop); Где myDiv, это ID блока, на который "бросаем" файлы. Ну теперь вкусненькое, нам нужно вывести изображения в <img>, для этого нужно создать сам объект изображения: <img src="" width="1024" height="768" id="result"/> И обработать событие бросания, в этом вам и поможет мой объект: var Drop = function(result){ //Здесь работа с брошенными элементами. }; Вот тут то и пришлось рыться в спецификации браузеров, оказывается есть объект FileReader, он то и поможет прочитать брошенный файл преобразовав его в base64. Выглядит это так: ar Reader = new FileReader(); Reader.onload = function(event){ $('#result').attr('src', event.target.result); }; console.log(Reader); var Drop = function(result){ Reader.readAsDataURL(result[0]); }; И да, не забывайте, что result это объект(массив), можно обработать сразу сколько угодно брошенных файлов. |
Выразить восторг, поругаться или предложить что-нибудь можно на форуме |
Для обсуждения этого сервиса так же есть темы на фрилансе по поиску , флудотопу ,и по удалённым сообщениям ,и по Актуальным/популярным темам , и по топу "кто кому больше наотвечал" |