получить из объекта изображение и вывести его в div

[jz828059]

При помощи плагина jquery upload file удалось загрузить изображение на сервер. А как передать это изображение в div?
Вот код подключения плагина к input#fileupload

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

Если можно, хотя бы примерно как это можно сделать. В JS совсем новичок, ничего в голову не приходит. Как выковырять изображение из объекта file? Каким способом помещают картинки в div?

[kostyanet]

В диве надо сделать элемент img и профтыкать ему src когда все пройдет. То есть с сервера надо получить адрес картинки или зная заранее где они сохраняются прописать его в клиенте используя имя файла в конце.

[kostyanet]

Как выковырять изображение из объекта file?

До загрузки что ли?

Это делается или через data url, или научно через FileReader. КОторый читает локальный файл и отдает байты в переменную. Из которой еще надо сделать изображение на канвасе, ибо вы не можете получить локальный путь к файлу в браузере.

[kostyanet]

Рендер канваса

парам img - ресурс картинки, байты, или от сервера или от ридера - эквипенисуально
парам макс - целое - размер

var render_canvas=function(img,max){
	max=max||100;
	var	src_w=img.width,
		src_h=img.height,
		k=Math.min(max/src_w,max/src_h),
		dst_w=Math.ceil(k*src_w),
		dst_h=Math.ceil(k*src_h),
		canvas=document.createElement('canvas'),
		ctx=canvas.getContext('2d');
	canvas.width=dst_w;
	canvas.height=dst_h;
	ctx.drawImage(img,0,0,src_w,src_h,0,0,dst_w,dst_h);
	return canvas;
};

[kostyanet]

чтение в байты локальной картинки

the_render=function(){
		
			var f=files[0];
			reader = new FileReader();
			reader.onload=(function(file) {
				return function(evt){
					var img = new Image();
					img.onload=function(){
						render_thumb(file,this);
/*
это оно самое - this - ресурс картинки, а file - файл, чтобы взять из него имя и тип и дату и тп
 */
					};
					img.src=evt.target.result;
				};
			})(f);
			reader.readAsDataURL(f);
		},

Кстати, кто знает, почему ридер надо каждый раз заново создавать? Я пробовал один раз - тогда ничего не работает кроме первого раза.


ЗЫ вообще в жиквере уи все уже должно быть предусмотрено

[jz828059]

До загрузки что ли?

Мне кажется свойство "done" говорит о том, что функция выполняется после того как файл загружен на сервер.

Спасибо за направление, попробую реализовать.