Upload de imagem com manipulação de imagem

thia6o · Outubro 19, 2018

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>

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>

Omar~ · Outubro 20, 2018

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.

Entrar

Arquivado

Upload de imagem com manipulação de imagem

Recommended Posts

thia6o 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

Data igual do facebook

Fazer busca no Banco de dados usando vários critério

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante