dr5y51em Сообщение 03/08/2011 11:41 Копия темы
Вывод изображения при помощи 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 это объект(массив), можно обработать сразу сколько угодно брошенных файлов.