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

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

1 个答案: