Untitled

<?php
    if (isset($_FILES['imagen'])){

        $cantidad= count($_FILES["imagen"]["tmp_name"]);

        for ($i=0; $i<$cantidad; $i++){
        //Comprobamos si el fichero es una imagen
        if ($_FILES['imagen']['type'][$i]=='image/png' || $_FILES['imagen']['type'][$i]=='image/jpeg'){
            //Subimos el fichero al servidor
            move_uploaded_file($_FILES["imagen"]["tmp_name"][$i], $_FILES["imagen"]["name"][$i]);
            $validar=true;
            }
            else $validar=false;
        }
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Portfolio Gallery with filtering category - Bootsnipp.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style type="text/css">

.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.btn-default:active .filter-button:active
{
    background-color: #42B32F;
    color: white;
}

.port-image
{
    width: 100%;
}

.gallery_product
{
    margin-bottom: 30px;
}

    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
        <div class="row">
        <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 40px">
            <h1 class="gallery-title">Subir Multiples Imagenes</h1>
        </div>
        </div>

        <div class="row">
        <div align="center">
            <form method="post" action="?" enctype="multipart/form-data">
            <input type="file"  class="btn btn-default" name="imagen[]" value="" multiple><br>
            <input type="submit" class="btn btn-primary" value="Subir Imagen">
            </form>
        </div>
        <div style="height: 100px">

        </div>
        <div class="row">

            <?php
                if (isset($_FILES['imagen']) && $validar==true){
            ?>
            <?php
                $cantidad= count($_FILES["imagen"]["tmp_name"]);
                for ($i=0; $i<$cantidad; $i++){
            ?>


              <div class="col-sm-3">
                <div class="card">
                  <div class="card-block">
                    <h3 class="card-title">Imagen</h3>
                    <img src="<?php echo $_FILES["imagen"]["name"][$i] ?>" class="img-responsive" width="100%">
                    <p class="card-text" style="word-wrap: break-word;"><?php echo $_FILES["imagen"]["name"][$i] ?></p>
                    <a href="#" class="btn btn-primary">Detalles</a>
                  </div>
                </div>
              </div>

            <?php
                    }
                }
            ?>
            </div>
            <!--div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
                <img src="http://fakeimg.pl/365x365/" class="img-responsive">
            </div-->


        </div>
    </div>
</section>

<script type="text/javascript">
$(document).ready(function(){

    $(".filter-button").click(function(){
        var value = $(this).attr('data-filter');

        if(value == "all")
        {
            //$('.filter').removeClass('hidden');
            $('.filter').show('1000');
        }
        else
        {
//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');

        }
    });

    if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");

});
</script>
</body>
</html>