Vanilla Javascript - #27 Formulários III - File Preview

Neste tutorial terminaremos as aulas de formulários com Javascript Vanilla. Trabalharemos com input type file.

Input file

No html vamos inserí-lo como multiple para que possamos anexar vários arquivos:

<div class="gallery"></div><br>
<input type="file" name="img[]" id="img" multiple><br>

No javascript faremos a manipulação desse input com o preview da imagem:

(function readyJS(win,doc){
    'use strict';

    let gallery=doc.querySelector('.gallery');
    let files=doc.querySelector('#img');

    function imgPreview(event){
        gallery.innerHTML='';
        let files=event.target.files;
        for (let i=0; i< files.length; i++){
            if(files[i].size > 300000){
                alert('very large image');
            }else{
                let reader=new FileReader();
                reader.onload=function (event) {
                    let urlImg=event.target.result;
                    let newImg=doc.createElement('img');
                    newImg.setAttribute("src",urlImg);
                    newImg.style='width: 100px;margin: 5px;';
                    gallery.appendChild(newImg);
                }
                reader.readAsDataURL(files[i]);
            }
        }
    }

    files.addEventListener('change',imgPreview,false);
})(window,document);

Repare que no código acima utilizamos o construtor FileReader para pegar a url local e exibir o preview. Outra coisa, logo após demonstramos uma validação pelo tamanho da imagem.

Sucesso nos códigos e na vida!