API tools faq
paste
LucianoCharles2017

preview-multiplo-upload-com dados-dos-arquivos

LucianoCharles2017
Nov 20th, 2018
172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Preview-Multiplo Upload</title>
  6.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  7.         <style>
  8.  
  9.             .miniatura {
  10.                 height: 75px;
  11.                 border: 1px solid #000;
  12.                 margin: 10px 5px 0 0;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <br/>
  18.  
  19.         <div class="container bootstrap snippet">
  20.  
  21.             <form action="#" method="post" enctype="multipart/form-data">
  22.  
  23.                 <input type="file" name="user_avatar[]" multiple id="addFotoGaleria">
  24.                 <div id="galeria"></div>
  25.  
  26.                 <div class="row">
  27.                     <div class="col-sm-6">
  28.                         <div class="form-group">
  29.                             <div class="col-xs-12">
  30.                                 <br>
  31.                                 <button class="btn btn-success">Enviar</button>
  32.                             </div>
  33.                         </div>
  34.                     </div>
  35.                 </div>
  36.             </form>
  37.         </div>
  38.  
  39.         <script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
  40.  
  41.         <script>
  42.             // Verifica se as APIs de arquivo são suportadas pelo navegador.
  43.             if (window.File && window.FileReader && window.FileList && window.Blob) {
  44.                // Todas as APIs são suportadas!
  45.            } else {
  46.                alert('A APIs de arquivos não é totalmente suportada neste navegador.');
  47.             }
  48.  
  49.  
  50.             function handleFileSelect(evt) {
  51.                 var files = evt.target.files; // Objeto FileList guarda todos os arquivos.
  52.                 var output = [];
  53.                 //Intera sobre os arquivos e lista esses objetos no output.
  54.                 for (var i = 0, f; f = files[i]; i++) {
  55. //        console.log('Objeto do arquivo', f);
  56.                     // Informação adicional se for imagem:
  57.                     if (f.type.match('image.*')) {
  58.                         var reader = new FileReader();
  59.                         //A leitura do arquivo é assíncrona
  60.                         reader.onload = (function(theFile) {
  61.                             return function(e) {
  62. //              console.log('Img info', e, theFile);
  63.                                 // Gera a miniatura:
  64.                                 var img = document.createElement('img');
  65.                                 img.src = e.target.result;
  66.                                 img.title = escape(theFile.name);
  67.  
  68.                                 var span = document.createElement('span');
  69.                                 //Obtém o tamanho:
  70.                                 //Só é possível obter o tamanho do arquivo após o carregamento dele na miniatura, como o src é um base64 gerado à partir do arquivo local não terá custo de carregamento através da rede.
  71.                                 img.onload = function() {
  72.                                     var i = document.createElement('i');
  73.                                     i.innerHTML = "<br>Tamanho Miniatura: " + img.width + "px Largura - " + img.height + "px Altura <br> Tamanho original:" + img.naturalWidth + "px Largura - " + img.naturalWidth + "px Altura";
  74.                                     span.appendChild(i);
  75.  
  76.                                     //Esse método retorna o tamanho calculado: Resultado esperado ((proporcional)x75)
  77.  
  78.                                     //var width = img.clientWidth;
  79.                                     //var height = img.clientHeight;
  80.                                 }
  81.  
  82.                                 span.appendChild(img);
  83.                                 document.getElementById('galeria').insertBefore(span, null);
  84.                             };
  85.                         })(f);
  86.  
  87.                         // Read in the image file as a data URL.
  88.                         reader.readAsDataURL(f);
  89.                     }
  90.  
  91.                     output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
  92.                             f.size, ' bytes,  última modificação: ',
  93.                             f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
  94.                             '</li>');
  95.                 }
  96.                 document.getElementById('galeria').innerHTML = '<ul>' + output.join('') + '</ul>';
  97.             }
  98.  
  99.             document.getElementById('addFotoGaleria').addEventListener('change', handleFileSelect, false);
  100. //            $(function() {
  101. //                // Pré-visualização de várias imagens no navegador
  102. //                var visualizacaoImagens = function(input, lugarParaInserirVisualizacaoDeImagem) {
  103. //
  104. //                    if (input.files) {
  105. //                        var quantImagens = input.files.length;
  106. //                        for (i = 0; i < quantImagens; i++) {
  107. //                            var reader = new FileReader();
  108. //                            reader.onload = function(event) {
  109. //
  110. //                                $($.parseHTML('<img class="miniatura">')).attr('src', event.target.result).appendTo(lugarParaInserirVisualizacaoDeImagem);
  111. //                            }
  112. //
  113. //                            reader.readAsDataURL(input.files[i]);
  114. //                        }
  115. //                    }
  116. //
  117. //                };
  118. //                $('#addFotoGaleria').on('change', function() {
  119. //                    visualizacaoImagens(this, 'div.galeria');
  120. //                });
  121. //            });
  122.         </script>
  123.     </body>
  124. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!