preview-multiplo-upload

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Preview-Multiplo Upload</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <style>

            .miniatura {
                height: 75px;
                border: 1px solid #000;
                margin: 10px 5px 0 0;
            }
        </style>
    </head>
    <body>
        <br/>

        <div class="container bootstrap snippet">

            <form action="#" method="post" enctype="multipart/form-data">

                <input type="file" name="user_avatar[]" multiple id="addFotoGaleria">
                <div class="galeria"></div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <div class="col-xs-12">
                                <br>
                                <button class="btn btn-success">Enviar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>

        <script>
            $(function() {
                // Pré-visualização de várias imagens no navegador
                var visualizacaoImagens = function(input, lugarParaInserirVisualizacaoDeImagem) {

                    if (input.files) {
                        var quantImagens = input.files.length;

                        for (i = 0; i < quantImagens; i++) {
                            var reader = new FileReader();

                            reader.onload = function(event) {
                                $($.parseHTML('<img class="miniatura">')).attr('src', event.target.result).appendTo(lugarParaInserirVisualizacaoDeImagem);
                            }

                            reader.readAsDataURL(input.files[i]);
                        }
                    }

                };

                $('#addFotoGaleria').on('change', function() {
                    visualizacaoImagens(this, 'div.galeria');
                });
            });
        </script>
    </body>
</html>