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

或者

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