1ページに1つ以上の画像をアップロードするには、droparea js

Question

私はdroparea jsを使用しています。私は4アップロードしています。問題は、アップロードメニューの1つで画像をアップロードしたい場合、アップロードメニューの4つすべてを変更することです。

<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> 

私はjsfiddleに入れたいですが、私はオンラインjsとdropareaプラグインのcssをファイルできません。

2番目のメニューや最初のメニュー以外にアップロードした場合、最初のメニューに結果が表示されます。だから私はid="file-preview"からclass="file-preview"に変わります。 1から別のイメージをアップロードする方法を教えてください。

Answer 1

私はdropareaに精通していませんが、おそらく単一の.droparea（）インスタンスではなく、それぞれ別々のインスタンスを作成する必要があります。

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

あなたはこの必要がある場合があります：私は私の説明を更新

$('.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(); }); 
        }); 
       }; 
      } 
     }) 
    })