Блог

Главная - Вопросы по программированию - Загрузчик изображений Jquery

Загрузчик изображений Jquery

#jquery

#jquery

Вопрос:

Я новичок в jQuery и сталкиваюсь с этой проблемой:

У меня есть эта сетка кругов, в которой я использую функцию загрузки изображений при нажатии на маленькую кнопку внутри div.

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

HTML

 <body>
<div class='content'>

  <section class='example'>
    <div class='gridly'>
        <div class='brick small'>
            <div id="output"></div>
            <a class="topopup" href="#">Z</a> 
            <a class='delete' href='#'>amp;times;</a>

      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>amp;times;</a>
      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>amp;times;</a>
      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>amp;times;</a>
      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>amp;times;</a>
      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>amp;times;</a>
      </div>
      </div>

    <p class='actions'>
      <a class='add button' href='#'>Add</a>
    </p>
  </section>

JavaScript

 $(document).ready(function() { 
    var options = { 
        target:   '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  beforeSubmit,  // pre-submit callback 
        success:       afterSuccess,  // post-submit callback 
        resetForm: true        // reset the form after successful submit 
    }; 

    $('#MyUploadForm').submit(function() { 
        $(this).ajaxSubmit(options);        
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 

function afterSuccess() {
    $('#submit-btn').show(); //hide submit button
    $('#loading-img').hide(); //hide submit button
}    
$('#submit-btn').hide(); //hide submit button
$('#loading-img').show(); //hide submit button
$("#output").html("");

Комментарии:

1. можете ли вы опубликовать скрипку с ошибкой?

2. dropzonejs.com это мило.

3. Решает ли мой ответ вашу проблему?

Ответ №1:

ваша проблема в div с output идентификатором.

Идентификатор должен быть уникальным в вашем html.

Вы используете его в своей опции script ( target: '#output' )

$("#output") <— получить первый элемент, соответствующий условию (первый div с output идентификатором)

изменить 

 <div id="output"></div>
<div id="output"></div>
<div id="output"></div> and so on

с

 <div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>

Получите его с помощью jquery таким образом

$("#output1")

и в ваших настройках измените target параметр

обратитесь к документации здесь