получить из объекта изображение и вывести его в 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, время: 13:58. |