Иконка загрузки - внедрение

[Santiago]

Подскажите, кто имел дело с этим. Перебрал примеры, эксперементировал неделю, но никак не могу сделать следующее...

Чтобы после того, как в uploader'е выбираешь фотку и жмешь на кнопку "отправить" - появлялась "иконка загрузки" рядом с кнопкой, а после загрузки фотки пряталась бы и появлялась фотка.

uploader нашел и подключил и все хорошо, но никак не могу разобраться с внедрением "иконки загрузки"...

Вот я про эти "иконки загрузки" http://www.ajaxload.info/

Вот мои скрипты:

jQuery:

<script type="text/javascript">
    $(document).ready(function() {
    $('#form2').submit(function(){ 
    $('#loader').addClass('icon');       // [u]класс с background'ом иконки[/u]
    $('#photo_ava img').load(function(){
    $('#loader').removeClass('icon');
    $('#photo_ava img').show();
    }); // the end load
    }); //the end submit
    }); //the end ready
</script>

HTML код uplouder'a:

<form name="form2" enctype="multipart/form-data" method="post" action="upload.php" id="form2" />
<fieldset>
    <legend>Photo upload</legend>
    <p><div id="imageUpload">Pick up an image to upload, and press 'upload'</div></p>
<p><input type="file" size="32" name="image_field" value="" /></p>
</fieldset>
<p class="button"><input type="hidden" name="action" value="image" />
    <input type="submit" name="Submit" value="Upload" /></p>
    <div id="loader"></div>   // [u]место где вставляется иконка[/u]
</form>

Место где появляется фотка:

<div id="photo_ava"><img src="<?php echo $_SESSION['avatar_b'] ?>"/></div>

[Синдром]

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

Вот приблизительный порядок действий.

1. Сама форма у вас уже готова, в нее нужно будет добавить атрибут target со значением например upload-iframe.

2. Где нибудь на странице создайте пустой iframe ява скриптом или прямо в вашем коде на сервере что бы было приблизительно так <iframe name="upload-iframe" src="#"></iframe>

удобно создать его прямо за формой что бы далеко не ходить $('#form2').next() Тут важный момент на который нужно обратить внимание это атрибут name он должен совпадать с атрибутом target самой формы. Это механизм связывания формы с айфреймом

3. При помощи стилей скрывайте этот айфрейм

4. Теперь в вашем обработчике сабмита формы

$('#form2').submit(function(){ .....

добавте показ гифовской картинки загрузки с аякслоад

это будет начало загрузки

5. Вешайте load обработчик на айфрейм

$('#form2').next().load(function(){......});

это будет конец загрузки,

и это все что нужно, первым делом скрываете картинку загрузки которую показали в предыдущем шаге вторым делом берете данные вернувшиеся в айфрейм с upload.php, например так:

var iframe_val = $('#form2').next().contents().find('body').html()

и ложите их ну куда нужно... в зависимости какие данные возвращаються

путь к картинке

$('#photo_ava').child().attr('src', iframe_val);

или же полный тег img

$('#photo_ava').html(iframe_val);

Вот собственно и вся хитрость, дело десяти минут если со стороны сервера все готово

[Santiago]

Спасибо ))