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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


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

#1 Kdes70

Kdes70
  • Неактивные
  • 55 сообщений
  • Репутация: 0
0

Отправлено 29 July 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

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Загрузка картинок на сайт, добавление в БД и вывод её из БД
  2. При загрузке на хостинг не отображаются картинки
  3. Не понятная ошибка JS при оптимизации WP под PageSpeed Insights
  4. SAR - простая работа с ajax запросами
  5. Загрузка фотографий на сайте.


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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