Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   получить из объекта изображение и вывести его в div (https://javascript.ru/forum/misc/55825-poluchit-iz-obekta-izobrazhenie-i-vyvesti-ego-v-div.html)

jz828059 15.05.2015 23:52

получить из объекта изображение и вывести его в div
 
При помощи плагина 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 16.05.2015 05:13

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

kostyanet 16.05.2015 05:16

Цитата:

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

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

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

kostyanet 16.05.2015 05:18

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

парам 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 16.05.2015 05:24

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

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 16.05.2015 08:26

Цитата:

Сообщение от kostyanet
До загрузки что ли?

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

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


Часовой пояс GMT +3, время: 13:58.