使用droparea js在一个页面中创建一个以上的上传图像

Create more than 1 upload image in 1 page with droparea js

本文关键字：创建 一个以 图像 一个 js droparea 使用      更新时间：2023-12-23

我使用的是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到另一个之间上传不同的图像吗？

我不熟悉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(); });
                    });
                };
            }
        })
   })
相关文章：