Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

thia6o

Upload de imagem com manipulação de imagem

Recommended Posts

Olá.

Sou novo no forum, gostaria de saber como faço para fazer um upload de imagem com preview e manipulação do mesmo.

Ex: escolho algumas imagens visualizo, e se selecionei alguma erra eu removo e mando fazer o upload.

Tenho um código que remover a imagem mais quando faço upload ela ainda e mandada.

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.container-min-foto{
    height: 200px;
    margin: 15px;
    float: left;
}
.miniatura{
    height: 160px;
  }
.removerImg{
    text-align: center;
    color: #FFFFFF;
    background-color: #4900FF;
    display: inline-block;
    cursor: pointer;
    padding: 5px;
}
</style>
</head>
    
<body>
<p><button id="rf">Recaregar</button></p>
    <form method="post" enctype="multipart/form-data">
        <input id="files" name="files[]" type="file" multiple>
        <p><button type="submit">Envuiar</button></p>
    </form>
<div id="preview"></div>

<script>
$(function(){
 if (window.File && window.FileList && window.FileReader) {
     $("#files").change(function(evt) {
        var files = evt.target.files,
            filesLength = files.length;

    for (var i = 0; i < filesLength; i++) {
            var f = files

        if (!!f.type.match('image.*')) {
            var fileReader = new FileReader();

            fileReader.onload = (function(theFile) {

                return function(e) {                    
                    $("<span class=\"container-min-foto bord-rad-minFoto\">" +
                      "<img class=\"miniatura bord-rad-minFoto\" src=\"" + e.target.result + "\" title=\"" + theFile.name + "\"/>" +
                      "<br/><span class=\"removerImg\">Remover</span>" +
                      "</span>").insertBefore("#preview");

                        // REMOVER IMAGEM PRE VIEW
                    $(".removerImg").click(function(){
                        $(this).parent(".container-min-foto").remove();             
                    });
                };
            })(f);

        fileReader.readAsDataURL(f);

        }else{
            alert("Você selecionou um arquivo que nao é uma imagem")
        }
    }});
  } else {
      alert("Seu navegador não suporta a API de arquivos")
  }
});
</script>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader

 

Bem, adaptei um javascript aqui que criei a muito  para você pode ver como funciona:

UploadImg.js

Spoiler

/**
 * **********************************************
 * Prévia de imagem para upload.
 * @Copyright : (2016) Spell Master "omar pautz"
 * **********************************************
 */

var UploadImg = function () {
    var $prev = document.getElementById('dropbox');
    var $progressBar = document.getElementById('progess-bar');
    var $inputSend = document.getElementById('input-send');
    var $transfer, $file, $reader, $image;
    $upProgress = 0;

    function getInput(event) {
        $transfer = event.target.files;
        checkFile($transfer);
    }

    // Checar o tipo de arquivo e criar o cabeçalho
    function checkFile(files) {
        $upProgress = 0;
        $progressBar.style.width = 0;
        $reader = new FileReader();
        $reader.addEventListener('progress', progress, true);
        $file = files[0]; // Se for mais de 1 arquivo só seleciona o primeiro
        if (/\.(jpe?g|png|gif|bmp)$/i.test(files[0].name)) {
            $prev.innerHTML = null;
            createPrev(files[0]);
        }
    }

    // criar uma imagem igual a enviada
    function createPrev(file) {
        $image = document.createElement('img');
        $image.classList.add('image-photo-prev');
        $image.file = file;
        $prev.appendChild($image);
        $reader.addEventListener('load', loadPreview, true);
        $reader.readAsDataURL(file);
    }

    // exibir a imagem enviada
    function loadPreview(event) {
        $image.src = event.target.result;
        setTimeout(function () {
            $upProgress = 0;
            $progressBar.style.width = 0;
        }, 500);
    }

    // barra de progresso
    function progress(event) {
        if (event.lengthComputable) {
            $upProgress = Math.round((event.loaded / event.total) * 100);
            $progressBar.style.width = $upProgress + '%';
        }
    }
    $inputSend.addEventListener('change', getInput, true);
};

 

 

Exemplo de utilização em html

Spoiler

<style>
#progess-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: #ff0000;
    border-top: 1px solid #800000;
    border-bottom: 1px solid #800000;
    z-index: 1
}
.image-photo-prev {
    height: 200px;
    width: 200px
}

label > input {
    display: none
}
label {
    height: 50px;
    width: 230px;
    padding: 20px;
    background: #e5e5e5
}
</style>

<script src="UploadImg.js" type="text/javascript"></script>>


<div style="position:relative; top:0; left:0">
    <div id="progess-bar"></div>
</div>

<div id="dropbox" class="align-center"></div>

<label name="sendimg">Selecionar Imagem
    <input type="file" name="sendimg" id="input-send">
</label>

<script>var sendImg = new UploadImg();</script>

 

 

Basicamente é. Ao selecionar uma imagem pelo input você ativa a função.

Isso não é upload de imagem, e sim prévia.

 

Então pós a prévia se quiser enviar o arquivo o input file está armazenando o valor para o upload.

 

Obs.: Esse javascript já faz bastante tempo que fiz ele. Possui um bug no Mozilla com a barra de progresso (na verdade não é bug. E sim que o mozilla firefox processa muito mais rápido JS).

Não funciona corretamente em IE e Edge porque ambos navegadores são uma merd......

Cuidado ao copiar e colar textos do editor aqui do fórum. Você terá erros de caracteres na cópia.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Fala galera, tudo bem?
       
      Tenho o seguinte codigo:
       
       class Data {
      public static function ExibirTempoDecorrido($date)
      {
          if(empty($date))
          {
              return "Informe a data";
          }
          $periodos = array("segundo", "minuto", "hora", "dia", "semana", "mês", "ano", "década");
          $duracao = array("60","60","24","7","4.35","12","10");
          $agora = time();
          $unix_data = strtotime($date);
          // check validity of date
          if(empty($unix_data))
          {  
              return "Bad date";
          }
          // is it future date or past date
          if($agora > $unix_data) 
          {  
              $diferenca     = $agora - $unix_data;
              $tempo         = "atrás";
          } 
          else 
          {
              $diferenca     = $unix_data - $agora;
              $tempo         = "agora";
          }
          for($j = 0; $diferenca >= $duracao[$j] && $j < count($duracao)-1; $j++) 
          {
              $diferenca /= $duracao[$j];
          }
          $diferenca = round($diferenca);
          if($diferenca != 1) 
          {
              $periodos[$j].= "s";
          }
          return "$diferenca $periodos[$j] {$tempo}";
      }
      }
       
      Funciona redondinho se o valor retornado for de algumas horas, mas...
      Quando passa de dois meses, ele retorna a palavra mess. Deve ser por conta dessa linha
      if($diferenca != 1) 
          {
              $periodos[$j].= "s";
          }
       
      Quero que modre:
       
      2 meses atrás
      e não
      2 mess atrás.
       
      Espero que tenham entendido.
       
      Valeu
    • Por Carlos Web Soluções Web
      Olá...
      Estou tentando fazer o seguinte !!
      Listando dados em tabela !!
      Gostaria que....se na listagem houver 4 linhas...indepedente de seu número de ID, faça a listagem em ID ser em ordem 1 2 3 4 !!
      Exemplo...se tiver uma listagem de dados que está em ID 1 3 3...faça ficar 1 2 3 !!

       
      echo "<table class='tabela_dados' border='1'> <tr> <td>ID</td> <td>Nome Empresa</td> <td>Responsável</td> <td>Telefone 1</td> <td>Telefone 2</td> <td>E-mail 1</td> <td>E-mail 2</td> <td>Endereço</td> <td>CEP</td> <td>Bairro</td> <td>AÇÃO 1</td> <td>AÇÃO 2</td> </tr> "; $sql = "SELECT ID FROM usuarios_dados WHERE Usuario='$usuario'"; $result = $conn->query($sql); $num_rows = $result->num_rows; $Novo_ID = 1; for ($i = 0; $i < $num_rows; $i++) { $registro = $result -> fetch_row(); $sql2 = "UPDATE usuarios_dados SET ID='$Novo_ID' WHERE ID='$Novo_ID'"; $result2 = $conn->query($sql2); $Novo_ID++; } $sql = "SELECT * FROM usuarios_dados"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<tr> <td>$row[ID]</td> <td>$row[Nome_Empresa]</td> <td>$row[Responsavel]</td> <td>$row[Telefone_1]</td> <td>$row[Telefone_2]</td> <td>$row[Email_1]</td> <td>$row[Email_2]</td> <td>$row[Endereço]</td> <td>$row[CEP]</td> <td>$row[Bairro]</td> <td> <form method='post' action='Editar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='EDITAR'> </form> </td> <td> <form method='post' action='Deletar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='DELETAR'> </form> </td> </tr> "; } } else { echo "0 results"; } $conn->close();  
    • Por ILR master
      Boa tarde pessoal, tudo bem ?
       
      Eu uso o tinymce para cadastro de textos no meu siite, porém, quero fazer um sistema para que os colunistas possam fazer o próprio post.
      O problema do tinymce, é que ele mantém a formatação do texto copiado, como tamanho de fonts, negritos, etc... Quero que o usuário cole o texto e a própria textarea limpe a formatação para que ele formate como quiser.
       
      A pergunta é:
       
      O tinymce tem uma opção para desabilitar a formatação quando um texto é colocado?
      Tem alguma função via java ou php para retirar a formatação assim que o texto é colado?
      Ou é melhor usar um outro editor?
       
      Agradeço deste já.
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.