Input file para upload de imagens com preview (HTML, CSS e JavaScript)

Seu formulário não precisa ser feio quando você adicionar um input file para upload de imagens. Nesse vídeo vamos usar HTML, CSS e JavaScript para criar um input com pré visualização da imagem antes do envio. Isso vai te dar várias ideias para sua caixa de ferramentas de conhecimento.

Cursos de Python e JavaScript / TypeScript com desconto:

#html #css #javascript #input #file

[xenxem]

Otávio Miranda um dos grandes devs. Semprre trazendo assuntos que têm utilidades no dia a dia de um desenvolvedor.

[gustavoprevelate]

Muito obrigado pela ajuda! estou responsável por fazer um projeto que vai utilizar Banco de dados, BackEnd e FrontEnd, estou na parte de FrontEnd e preciso criar uma aba para receber upload de fotos, depois criar uma outra aba que vai pegar aquelas fotos enviadas no site e mostrar em um carousel.

[marianasilva]

excelente salvou meu dia, procurei vários conteúdos mais nada tãoclaro quanto, maravilhoso.

[ronicarvalho]

bom de mais mesmo. tem aula sobre armazenar imagem numa pagina? tipo, voce fez pra aparecer, e armazenar elas numa pagina e permanecer e apagar? isso vale pra videos?

[rafablum]

Gostei da aula e a forma de explicar a aula!! Bora lá 👊👊

[pchavesfilho]

Muito bom o recurso demonstrado. Gostaria de gravar as imagens numa tabela utilizando o campo Blob. Seria possível fazer um exemplo ??? Tenho um pouco de dúvidas ainda. Abraços. Parabéns pelo tutorial.

[alan]

Muito bom! Justamente o que eu preciso, ajudou bastante, conteúdo muito relevante.

[jaelmaciel]

Muito boa a sua explicação, obrigado pela sua ajuda!!

[wandersonricardo]

Nossa, fantástico, obrigado professor!

[felipecastro]

Parabéns professor Otávio, mais uma excelente explicação, estou gostando muito do curso básico de js e typescript

[MsCristinateixeira]

eu fiz um botão pra remover o que está no input type = file, alguém sabe o código pra remover o que está dentro do input?

[oficinaphp]

Eu preciso enviar uma imagem que o usuário não vai selecionar, que ele vai copiar pelo ctrl c ou print sc, tenho que enviar essa imagem que esta em uma pasta temporaria do sistema operacional e enviar para o servidor. Tipo, o cara usa um outro sistema que ele clica e copia uma imagem e depois ele vai no input e aperta ctrl v para poder envia-la, igual ao whatsapp web. Você pode me dar um norte para eu fazer isso?

[marcelosennasenna]

e se eu quiser colocar um arquivo em pdf posso fazer dessa maneira tbm. ?

[alisonsilva]

Adorei o video mano, tu é foda !
qual é o nome dessa font? onde baixo ela ?

[proandref]

Muito massa. E no caso de serem varias imagens como seria a manipulação ?

[NOMOUSE]

Pensando numa aplicação prática como seria no caso de armazenar em SQLite3 uma descrição da imagem e fazer uma apresentação como um slide ...

[brunomonteiro]

Otávio Miranda, que conteúdo top procurei varaios e não achava. o seu video salvou hehe, mano poderia fazer um video como adicionar uma embaixo da outra e poder fazer upload, tentei de todos jeitos aqui mais não vai

[luan_ferreira_]

Uma vez fiz um joguinho de memória e usei a tag <div></div> pra virar as cartas e tau, só que n dava pra usar o :focus nas div ent vi num site que tinha que por um tabindex aí funcionou normalmente, na sua opinião esse é o mlr jeito? ou deveria usar outra elemento no lugar das div pra evitar o uso do tabindex e continuar usando :focus

[hugorodrigues]

Como que faço pra no lugar do codigo do JS eu colocar no TypeScript??

[gamebarbaruiva]

Boa tarde!
Assisti um video aula sua, que por sinal foi é excelente que foi este Convertendo vídeos com Python + FFMPEG - Aula 34, quando faço o teste com o print ele executa da mesma forma que voce ensina, quando altero e dou o comando os.system(comando) aparece esteja mensagem 'A sintaxe do nome do ficheiro, do nome do diret�rio ou da etiqueta do volume � incorreta', ja estou uma semana tentando achar onde errei se poder me ajudar.
valeu um abraço.