多页上传菜单，共1页

Question

我想创建4个上传菜单（每个菜单只能上传一次） 这就是我想做的事情

|-------------------|
| upload 1          |
|                   |
|-------------------|
|2     |3     |4    |
|------|------|-----|

我现在正在使用droparea jquery插件。 在这里，如果你想检查演示http://www.jqueryrain.com/?DcZAsxGN

问题是。如果我只有1个上传菜单，它的效果很好。 但是当我尝试创建4个上传菜单时。它不起作用。 在示例中：如果我想在第二个菜单中上传图像。图像显示在第一个上传菜单中。然后我意识到因为它使用id，所以我改为上课。 然后当我尝试重新运行我的代码。当我在第二个菜单上传图像。它影响到外部上传菜单。 （将所有图像更改为与第二个菜单相同）

来自这个

到这个

我的代码就像这样

<div class="upload-photo">
            <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>
            <div class="row">
                <div class="col-md-4 col-sm-4 col-xs-4">
                    <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>
                <div class="col-md-4 col-sm-4 col-xs-4">
                    <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>
                <div class="col-md-4 col-sm-4 col-xs-4">
                    <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>
            </div>
        </div>

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

抱歉，如果它是愚蠢的问题，但请帮助我。或者你们知道像这样工作的jquery插件吗？

第一次它的id =“file_preview”但我改为class =“preview”但它对所有上传菜单的影响。我尝试在脚本中添加.closest（'。droparea'）以使其具体，但没有任何改变。

Answer 1

我不确定，但试试这个来源。

$(document).ready(function(){
    for(var i=0;i<$('.droparea').length;i++){
            $($('.droparea')[i]).droparea({
                        url: 'server.php',
                        success: function( server_return, name, uploaded_file )
                        {
                            $(this).after( $('<p />').html( 'File sent: <b>' + name + '</b>' ) );
                            var dropArea = $(this);
                            var filePreview = $(this).parent().children('.file_preview');
                            var oFReader = new FileReader();

                            oFReader.readAsDataURL( uploaded_file );
                            oFReader.onload = function (oFREvent)
                            {
                            filePreview.animate({opacity: 0}, 'slow', function(){
                                    // change the image source
                                    dropArea
                                        .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(); });
                                });
                            };
                        }
                    });
               }
          });

OR

$(document).ready(function(){
    for(var i=0;i<$('.droparea').length;i++){
         $($('.droparea')[i]).droparea({
                    url: 'server.php',
                    success: function( server_return, name, uploaded_file )
                    {
                        $($('.droparea')[i]).after( $('<p />').html( 'File sent: <b>' + name + '</b>' ) );

                        var oFReader = new FileReader();

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

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