Загрузка аватарки без перезагрузки страницы
 

Доброго времени суток.
Подскажите какой аддон использовать для завгрузки аватарки/фото, что бы они сразу отображались на странице.
Если можно с примером.
Заранее спасибо!

а без аддона как отображается?

Вот ссылка на статью с примерами и по-русски http://web-linux.ru/?p=417
Так же посмотри здесь http://forum.antichat.ru/thread100550.html , этот вариант на мой взгляд один из лучших ...но использует uploadprogress (не у всех установлен) для PHP .

Серверная часть у меня не на php.
А можно сделать вместо стандартного инпут-тега "Обзор" ссылку "Добавить аватар" и при клики на ссылку открывать диалог для выбора файла. После подтверждения файл грузился бы на сервер и соотв у img менялся src.
Куда смотреть что бы реализовать такую конструкцию?

вроде нашел!
тут

Возникла проблема.
у моего html документа структура
...
<form id="1">
<table>
<tr>элементы</tr>
<tr>элементы</tr>
<tr><img ... /> добавить фото</tr>
..
</table>
</form>

изобразил в виден картинки

и я подключил плагин One Click Upload. Насколько я понимаю для передачи multipart/form-data т.е. файла используется форма.
вложенные формы у нас не поддерживаются. как мне выйти из положения, если я не могу отказаться от внешней формы, т.к. с помощью нее данные уезжают на сервер при сабмите.
попробовать перекроить верстку и разбить на пару таблиц каждая в своей форме?

а вложенные формы ввобще не поддерживаются: ты можешь посмотреть как браузеры реагируют на внутреннюю форму, может они ее просто игнорируют

еще можнододелать плагин, чтобы форма вставлялась перед отправкой файл и удалялась - после

еще можнол поискать другой плагин

еще есть swfupload

так мне кажется что все они основаны на формах. я не прав?

а можно поподробнее?

большинство, но могут быть такие, которые рассчитывают на текущую форму (что она подходит для отправки файла), а не создают свою
есть еще основанные на flash'е

а что подробнее? Берется исходник и доводиться до нужного поведения. Или мне за тебя это сделать и выложить здесь исправленную версию? Могу только помочь, т.е. нужны конкретные вопросы

Правильно я понимаю что мне нужно подправить исходник так, что бы он находил текущую форму и создавал другую форму за ее пределами?
т.е. проверял есть ли форма выше уровнем, если нет, то создаем тут, если есть то в контейнере в котором находится форма самого высокого уровня

нужно так: поискать вокруг форму, если нету, то обернуть текущий элемент в форму, если есть - проверить ее enctype, ну еще, может, что-нибудь подправить

p.s. формы не могут быть вложенными - http://www.w3.org/TR/html401/interac...html#edef-FORM

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

Вот еще форма для загрузки http://www.uploadify.com/ , работает на Flash , но есть возможность изменить вид кнопки и убрать форму после загрузки файла.У меня реализовано так: разрешено загружать 3 файла, после загрузки 3-его форма убирается.

Также эта форма позволяет определить как вес файла , так и его размер. Вес файла определяет до нажатия кнопки , а размеры ,после нажатия кнопки "загрузить".У меня реализованно так: стоят минимальные размеры изображения , 150 px на 150 px, если размеры меньше , то выдает алерт с текстом и картинка не грузится.

grusha, красивая реализация, но много зачачивать т.к. у меня серверная сторона не пхп

x-yuri, а неподскажите, пожалуйста как самым красивым способом узнать есть ли у элемента форма?

alert($('#upload1').form) возвращает undefined
я мало знаком с jQuery. хотелось бы именно ее средствами

во!
$('#upload1').parents("form")

не могу понять

в options.enctype значение 'multipart/form-data'
я его устанавливаю
но когда пытаюсь сразу получить его
там application/x-www-form-urlencoded

alert($('#upload1')[0].form)

alert( options.enctype );

почему то при такой конструкции все заработало.
понимаю что глупо, но по какой то причине так заработали обе формы(вложенная и внешняя). т.е. сейчас и файл грузится и данные после этого адекватно сохраняются.

var form;
if(element.parents("form").size() < 0){
}else{

form = $(
'<form '+
'method="post" '+
'enctype="'+options.enctype+'" '+
'action="'+options.action+'" '+
'target="iframe'+id+'"'+
'></form>'
).css({
margin: 0,
padding: 0
});

}

при такой конструкции form в документ не добавляется
и что, браузер делает 2 запроса?

видимо скрипт добавляет iframe в текущую форму. файл отправляется нормально, после этого при сабмите данные уходят нормально на сервер и сохраняются. не красивое решение, но проблема решилась

можно еще эту тему почитать - http://javascript.ru/forum/jquery/36...d-fajjlov.html

да в принципе если работает, то пусть работает.
печально что непонятно почему оно работает)

действительно печально... так разберись ;)

я правильно понимаю что при энкодинге формы
application/x-www-form-urlencoded
файл передаваться не должен был?

скажем так, файлы должны передаваться в multipart/form-data

хм. посмотрел структуру DOM. создается вложенная форма и iframe но при этом все прекрасно работает )

По ходу пьесы появилось еще одно желание - откреплять эти самые аватары.
проблема с откреплением и созданием новой ссылки решибась без особых проблем. проблема возникла когда задумался о том где брать картинку/заглушку, если я ее с сервера не грузил )
т.е. мы заходим в профиль человека и видим там загруженную ранее аватарку. нажимаем ссылку УДАЛИТЬ и обращаемся к серверу, на сервере картинка трется, но надо ведь вставить пустышку в img, но ее то с сервера не грузили.
сейчас
но как то совсем не красиво.
что посоветуете?

либо $('#foto').attr('src', '<путь к аватарке по умолчанию>');
либо убрать место под аватарку

так на логическом диске нет аватарки, а с сервера она ведь при загрузке страницы не загружалась.
убирать не хотелось бы.

при чем тут логический диск? Под словом "путь" я подразумевал URL

так при этом перезагрузки страницы то не будет, а картинка(заглушка) с сервера не загружалась. или должно сработать?

а ты что попробовать боишься?
p.s. "я даже немного завидую - тебя ждет еще много удивительных открытий :)", вспомнилось

попробовал! и в правду работает)
думал всегда что для получения данных если страница загружена полность нужно пользоваться аяксом т.е. инициировать запрос, а тут чудо такое )

но ведь при изменении window.location браузер переходит на другую страницу? А что ему остатается делать при изменении URL каритинки? Либо запретить это действие, либо загрузить новую картинку