1

Здравствуйте! Нужна помощь специалистов в 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>

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

при нажатии на один из блоков 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

1 ответ 1

2

В Вашем коде вижу, как вариант - дать разные ID элементам.

А вообще с этим либа PrettyPhoto отлично справляется

1
  • так они и так разные id="uploads_1", id="uploads_2" и т.д. как сделать так чтобы каждый из них попадал new AjaxUpload(button где button и является id div по которому нажали
    – Kdes70
    29 июл 2014 в 14:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.