получить из объекта изображение и вывести его в 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? |
В диве надо сделать элемент img и профтыкать ему src когда все пройдет. То есть с сервера надо получить адрес картинки или зная заранее где они сохраняются прописать его в клиенте используя имя файла в конце.
|
Цитата:
Это делается или через data url, или научно через FileReader. КОторый читает локальный файл и отдает байты в переменную. Из которой еще надо сделать изображение на канвасе, ибо вы не можете получить локальный путь к файлу в браузере. |
Рендер канваса
парам 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;
};
|
чтение в байты локальной картинки
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);
},
Кстати, кто знает, почему ридер надо каждый раз заново создавать? Я пробовал один раз - тогда ничего не работает кроме первого раза. ЗЫ вообще в жиквере уи все уже должно быть предусмотрено |
Цитата:
Спасибо за направление, попробую реализовать. |
| Часовой пояс GMT +3, время: 17:40. |