javascript - 使用 droparea js 在 1 个页面中创建多个上传图像

Question

我正在使用 droparea js。我有4个上传。问题是如果我想在其中一个上传菜单中上传图片，它会更改所有 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上，但是我无法提交droparea插件的在线js和css。

如果我第一次在第二个菜单或除第一个菜单以外的任何人上传，结果将显示在第一个菜单中。所以我从 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(); });
                    });
                };
            }
        })
   })