Preview more than one image before upload

Navigation
0

Hello everyone, I'm developing a real estate website, but I'm still a bit of a layperson in php, a friend of mine was helping me, but now he can not, the system I want is the following, let's say in my database has several properties registered and I need to only change the photo of the properties and still see the photos that I will send to the database and the folder before uploading the image. They know the facebook site type when we are going to edit the profile image for example and it shows us the right loaded image. How do I do this.

Note: I want to pre-view multiple, ie preview more than one photo. 

<?php
session_start();
if (isset($_SESSION['usuario'])&&isset($_SESSION['logado'])) {
/*
paginas que adiciona fotos no imóvel
*/


 //verifico se foi passado o ID do imóvel
 if (!isset($_GET['id'])):


//Caso não voltar a pagina
echo '<div class="erro">Operação incorreta</div>';
header('Refresh: 1; ?pag=imoveis_fotos');


else:
$imv_id = $_GET['id'];


 endif;

 //verifico a quantidade de fotos que existe no imovel

  $fotos = new Conexao();
  $fotos->ExecSQL("select * from imoveis_fotos where foto_imovel =     

   '$imv_id'");


   //tratando o limite de fotos
    $limite = (Sistema::getLimiteFotos() - $fotos->TotalRegistros());
    ?>

     <!--Scripts da biblioteca de upload de imagens-->
     <script src="../lightbox/js/jquery-1.11.0.min.js"></script>
     <script src="uploadify/jquery.uploadify.min.js"          
      type="text/javascript"></script>
       <link rel="stylesheet" type="text/css"   
       href="uploadify/uploadify.css">


      <div class="texto"> 
       <p id="quem" style="margin-bottom:40px;">Adicionar imagens
       </p>
       <?php
       echo '<center><div style="border:1px solid #000; width:500px;    
       margin-bottom:50px; font-weight:bolder;">Este imóvel tem ' .  
       $fotos->TotalRegistros() . ' imagens, o limite é ' .  
       Sistema::getLimiteFotos() . '.<br>Você pode enviar ainda: ' .  
        $limite . ' imagem(s)</div></center>';

         if($limite < 1):
         die('<div id="erro">O limite de imagem deste imóvel esgotou.       
         Caso queira outras imagens precisa apagar algumas.</div>');
          endif;


           ?>
           <script src="uploadify/jquery.uploadify.min.js"  
           type="text/javascript"></script>
           <link rel="stylesheet" type="text/css"  
            href="uploadify/uploadify.css">


            <center>   <form>
            <div id="queue"></div>
            <input id="file_upload" name="file_upload" type="file"     
             multiple="true">
             </form>

              <script type="text/javascript">
              <?php $timestamp = time();?>
               $(function() {
               $('#file_upload').uploadify({
               'formData'     : {
                                    'imovel': '<?php echo $imv_id ;?>', 
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : '<?php echo md5('unique_salt' .  
                 $timestamp);?>'
                  },
                  'swf'      : 'uploadify/uploadify.swf',
                   'uploader' : 'uploadify/uploadify.php',
                            'buttonText': 'Selecionar arquivo',
                            'uploadLimit': <?php echo $limite ?>,


                            // depois de terminar
                             'onQueueComplete' : function(queueData) {
                        alert(queueData.uploadsSuccessful + ' Imagem (ns)  
                        foram carregadas.');
                        url = '?pag=imoveis_fotos&id=<?php echo $imv_id  
                         ;?>';
                         $(location).attr("href",url);

                           } // fim do onQueueComplete
                            });
                                });





                              </script>
                              </center>


                               </div>
                               <a style="background: #73c425;                 
                                font-family:'OpenSans', sans-serif;  
                                  padding: 5px;  margin-left: 10px; 
                                  font-size: 15px; text-transform:none;" 
                                  href="?pag=imoveis_fotos&id=<?php echo  
                                  $imv_id; ?>">Voltar</a>





                                   <?php } else  
                                   {header("Location:login.php");} ?>
    
asked by anonymous 30.04.2017 / 01:03

3 answers

1

$(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');
});
});
  .miniatura {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="file" multiple id="addFotoGaleria">
<div class="galeria"></div>
    
30.09.2018 / 07:54
0

Here are some tips to preview the image;)

In HTML there will be something like this: 

<form id="form1" >
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="descricao imagem blablal" />
</form>

In Javascript: 

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

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

$("#imgInp").change(function(){
    readURL(this);
});

What this code will do is read the uploaded file and display it before taking any action like Upload. Of course you will have to adapt but the function that does what you want is readUrl() that when you send the input there it will render the image to the screen.

    
01.05.2017 / 13:41
0

To preview the image (s) before uploading - functional example 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><style>.imageThumb{max-height:75px;border:none;margin:10px10px00;padding:1px;}</style><script>$(function(){//MultipleimagespreviewinbrowservarimagesPreview=function(input,placeToInsertImagePreview){if(input.files){varfilesAmount=input.files.length;for(i=0;i<filesAmount;i++){varreader=newFileReader();reader.onload=function(event){$($.parseHTML('<imgclass="imageThumb">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

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

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

</script>

 <form action="upload_fotos.php" method="post" enctype="multipart/form-data">
  <input type="file" name="files[]" multiple id="gallery-photo-add">
  <input type="submit" name='submit_image' value="Upload Image"/>
 </form>
 <div class="gallery"></div>

upload_photos.php 

<style>
      .imageThumb {
         max-height: 75px;
         border: none;
         margin: 10px 10px 0 0;
         padding: 1px;
      }
</style>

<?php

if(is_array($_FILES))
{
    $output = '';


    foreach ($_FILES['files']['name'] as $name => $value)
    {
        $values .= "('{$value}'),";

                //com mais colunas ex:
                //$values .= " (NULL, '{$id_recuperado}', '{$nome}'),";


            $diretorio = "foto/".$value;

            if(move_uploaded_file($_FILES['files']['tmp_name'][$name], $diretorio))
            {
                $output .= '<img src="'.$diretorio.'" class="imageThumb" />';
            }
    }
    echo "imagens processadas <br>".$output;

    $values=substr($values, 0, -1);

    //conexão
    //$conn=.....

    $sql_fotos = "INSERT INTO 'imoveis_fotos' ('nomeColuna') VALUES $values";

            //com mais colunas ex:
            //$sql_fotos = "INSERT INTO 'imoveis_fotos' ('id', 'id_imagem', 'arquivo') VALUES $values";

    $result = mysqli_query($conn,$sql_fotos);

}


?>
    
01.10.2018 / 01:30
Convert image size before uploading PHP htaccess redirect Mobile