droparea ile 1 sayfada 1'den fazla resim oluştur js

Question

droparea js kullanıyorum. 4 tane dosyam var. Sorun, yükleme menüsünün birinde resim yüklemek istiyorsam, 4 yükleme menüsünün tümünü değiştirir.

<div class="col-md-12"> 
        <div class="droparea" > 
        <img src="http://placehold.it/200" class="file_preview" > 
       </div> 
       <input type="file" name="file" id="file" accept="image/*" style="display: none;" > 
    <div class="col-md-12"> 
        <div class="droparea" > 
        <img src="http://placehold.it/200" class="file_preview" > 
       </div> 
       <input type="file" name="file" id="file" accept="image/*" style="display: none;" > 
    <div class="col-md-12"> 
        <div class="droparea" > 
        <img src="http://placehold.it/200" class="file_preview" > 
       </div> 
       <input type="file" name="file" id="file" accept="image/*" style="display: none;" > 
    <div class="col-md-12"> 
        <div class="droparea" > 
        <img src="http://placehold.it/200" class="file_preview" > 
       </div> 
       <input type="file" name="file" id="file" accept="image/*" style="display: none;" > 
<script src="js/droparea.js"></script> 
<script> 
     $(document).ready(function(){ 
    $('.droparea').droparea({ 
       url: 'server.php', 
       success: function(server_return, name, uploaded_file) 
       { 
        $('.droparea').after($('<p />').html('File sent: <b>' + name + '</b>')); 

        var oFReader = new FileReader(); 

        oFReader.readAsDataURL(uploaded_file); 
        oFReader.onload = function (oFREvent) 
        { 
         $('.file_preview').animate({opacity: 0}, 'slow', function(){ 
          // change the image source 
          $(this) 
           .attr('src', oFREvent.target.result).animate({opacity: 1}, 'fast') 
           .on('load', function() 
           { 
            $('.statusbar').css({ 
             width: $('.droparea').outerWidth(), 
             height: $('.droparea').outerHeight() 
            }); 
           }); 

          // remove the alert block whenever it exists. 
          $('.droparea').find('.statusbar.alert-block').fadeOut('slow', function(){ $(this).remove(); }); 
         }); 
        }; 
       } 
      }); 
    }); 


    </script> 

Ben jsfiddle üzerine koymak istiyorum ama droparea eklentinin çevrimiçi js ve css dosyası olamaz.

İlk menüden veya ilk menü dışındakilerden birine ilk kez yüklerseniz, ilk menüde sonuç görünür. Böylece id="file-preview"'dan class="file-preview"'a değiştiriyorum. Bana 1'den diğerine farklı bir görüntüyü nasıl yükleyebileceğini öğretir misin?

Answer 1

Ben droparea ile aşina değilim, ama muhtemelen tek bir .droparea() örnek yerine, her biri için ayrı bir örnek oluşturmanız gerekir;

$('.droparea').each(function(){ 
    $(this).droparea() 
}); 

Buna gerekebilir:

$('.droparea').each(function(){ 
$(this).droparea({ 
      url: 'server.php', 
      success: function(server_return, name, uploaded_file) 
      { 
       $('.droparea').after($('<p />').html('File sent: <b>' + name + '</b>')); 

       var oFReader = new FileReader(); 

       oFReader.readAsDataURL(uploaded_file); 
       oFReader.onload = function (oFREvent) 
       { 
        $('.file_preview').animate({opacity: 0}, 'slow', function(){ 
         // change the image source 
         $(this) 
          .attr('src', oFREvent.target.result).animate({opacity: 1}, 'fast') 
          .on('load', function() 
          { 
           $('.statusbar').css({ 
            width: $('.droparea').outerWidth(), 
            height: $('.droparea').outerHeight() 
           }); 
          }); 

         // remove the alert block whenever it exists. 
         $('.droparea').find('.statusbar.alert-block').fadeOut('slow', function(){ $(this).remove(); }); 
        }); 
       }; 
      } 
     }) 
    })