Перейти к содержимому


Партнерская программа Kredov

Загрузка изображений и отображение помощью AJAX

#1 Kdes70

Kdes70
  • Пользователь
  • 55 сообщений
  • Репутация: 0
0

Отправлено 29 Июль 2014 - 13:14

Здравствуйте! Нужна помощь специалистов в jquery! пытаюсь реализовать вот такую идею для сайта:

 

 пять DIV-ов (типа инпут тип file)

<div id="images_block">

     <div class="file_block" id="uploads_1"><i class="fa fa-picture-o fa-4x"></i></div>
     <div class="file_block" id="uploads_2"><i class="fa fa-picture-o fa-4x"></i></div>
     <div class="file_block" id="uploads_3"><i class="fa fa-picture-o fa-4x"></i></div>
     <div class="file_block" id="uploads_4"><i class="fa fa-picture-o fa-4x"></i></div>
     <div class="file_block" id="uploads_5"><i class="fa fa-picture-o fa-4x"></i></div>
                	
</div>

принимают вот такой вид

Шаблон доски.png

 

при нажатии на один из блоков id^=uploads_ вызывается функция ajax загрузки (вернее предзагрузки, загружаться и запись в БД должно происходить потом по нажатию кпопки save )

и при удачной валидации вместо этого div должна появиться привью изображения

 

и так вот что я имею 

<script type="text/javascript">
var button = $('div[id^=uploads_]'); // кнопка выбираем дивы с атрибутом id который начинается uploads_
var path   = '<?=DK_ROOT?>/photo/advert/'; // директория загрузки
var id     = $('#adv_id').text(); // id поста


	new AjaxUpload(button, {

		action: 'ajax/upload.php',
		name: 'userfile',
		data: {id: id},
		onSubmit: function(file, ext){
			if(!(ext && /^(jpg|png|jpeg|gif)$/i.test(ext))){
				alert("Разрешено загружить только изображения!");
				return false;
			}
			button.text("Загрузка");
			this.disable();
			
		},
		onComplete: function(file, response){
		       this.enable();
		       var res = $.parseJSON(response);
		       if(res.answer == "OK"){
		           $(this).html("<img src='" + path + res.file + "' />");
		       }else{
		           alert(res.answer);
		       }
		   }

	});
</script>
 

так вот при таком раскладе только первый div работает как надо а остальные не реагируют, пробовал в самом начале делать через обработчик событий ON и повесить на него click

$('div[id^=uploads_]').on('click',  function(){
 тут остальной код приведенные выше...
});

то получается как бы, но только при первом нажатии формируется var button = $('div[id^=uploads_]'); а потом надо отвести мышь от данного дива и снова нажать, кароче полная лажа(((

 

ребят помогите, может кто уже выполнял данную задачу, или может другой плаги нужно для этого

 

Заранее благодарю за любую оказанную помощь   !!!

 


 

 

  • 0


Оформление форума – IPBSkins.ru