Javascript 一页多个上传菜单

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

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

我现在正在使用droparea jquery插件。 如果你想看演示的话就在这里

问题是。如果我只有一个上传菜单，它的工作很好。 但是当我尝试创建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(); });
                            });
                        };
                    }
                });
      });

$（文档）.ready（函数（）{
$（'.droparea'）.droparea({
url:'server.php'，
成功：函数（服务器返回、名称、上载的文件）
{
$（'.droparea'）。在（$（'
'）.html（'File sent:'+name+''）之后；
var of reader=new FileReader（）；
readAsDataURL（上传的文件）；
oFReader.onload=函数（OFRENT）
{
$（'.file_preview'）。设置动画（{opacity:0}，'slow'，function（）{
//更改图像源
$（此）.closest（“.droparea”）
.attr（'src'，ofretent.target.result.）.animate（{opacity:1}，'fast'））
.on（'load'，function（））
{
$（'.statusbar'）.css({
宽度：$（'.droparea'）。外径（），
高度：$（“.droparea”）.outerHeight（）
});
});
//只要存在警报块，就将其删除。
$（'.droparea'）.find（'.statusbar.alert block'）.fadeOut（'slow'，function（）{$（this.remove（）；}）；
});
};
}
});
});

对不起，如果这是个愚蠢的问题，请帮帮我。或者你们知道像这样工作的jquery插件

---

第一次它的id=“file\u preview”但我改为class=“preview”，但它会影响所有的上传菜单。我尝试在脚本中添加.nexist（'.droparea'）以使其特定，但没有任何更改。

我不确定，但请尝试此源代码

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

$（文档）.ready（函数（）{
对于（var i=0；i我不确定，但请尝试此源代码

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

$（文档）.ready（函数（）{
对于（VARI=0；我会影响所有的上传菜单，先生。你们知道这样的插件吗。？我修改了我的源代码。我也不确定，但..再试一次。不工作，先生。但我尝试dropzone，我会让你们知道仍然会影响所有的上传菜单，先生。你们知道这样的插件吗。？我修改了我的源代码。我也不确定，但..再试一次。不工作，先生。bu到dropzone我会让你知道的