No video

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

  Рет қаралды 27,453

Otávio Miranda

Otávio Miranda

2 жыл бұрын

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.
Código: codepen.io/lui...
Cursos de Python e JavaScript / TypeScript com desconto:
www.otaviomira...
Twitter: / otaviomirandabr
#html #css #javascript #input #file

Пікірлер: 48
@xenxem
@xenxem 10 ай бұрын
Otávio Miranda um dos grandes devs. Semprre trazendo assuntos que têm utilidades no dia a dia de um desenvolvedor.
@marianasilva7689
@marianasilva7689 9 ай бұрын
excelente salvou meu dia, procurei vários conteúdos mais nada tãoclaro quanto, maravilhoso.
@edilson4082
@edilson4082 Ай бұрын
Parabens...Muito bom o tutorial
@wandersonricardo7116
@wandersonricardo7116 2 жыл бұрын
Nossa, fantástico, obrigado professor!
@alan1872
@alan1872 Жыл бұрын
Muito bom! Justamente o que eu preciso, ajudou bastante, conteúdo muito relevante.
@gustavoprevelate4389
@gustavoprevelate4389 Жыл бұрын
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.
@felipecastro2993
@felipecastro2993 2 жыл бұрын
Parabéns professor Otávio, mais uma excelente explicação, estou gostando muito do curso básico de js e typescript
2 жыл бұрын
Fico feliz em saber
@indicatuweb8000
@indicatuweb8000 Жыл бұрын
Didática excelente. Parabéns!
@rafablum
@rafablum 2 жыл бұрын
Gostei da aula e a forma de explicar a aula!! Bora lá 👊👊
2 жыл бұрын
😉🤟
@jaelmaciel3899
@jaelmaciel3899 8 ай бұрын
Muito boa a sua explicação, obrigado pela sua ajuda!!
@carolinapinsdorf6372
@carolinapinsdorf6372 2 ай бұрын
Excelente video!!!!
@raphafratel
@raphafratel 8 ай бұрын
tambem da pra fazer assim, usando o metedo URL.createObjectURL que cria uma url temporaria let imageInput = document.getElementById("image-inputt") let imageShow = document.getElementById("image-show") imageInput.addEventListener('change', ()=>{ if (imageInput.files.length > 0) { imageShow.src = URL.createObjectURL(imageInput.files[0]) } })
@MsCristinateixeira
@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?
@estanislaupucuta931
@estanislaupucuta931 3 ай бұрын
parabéns... muito bom o recurso
@javiervieira8274
@javiervieira8274 2 жыл бұрын
Incrível professor, obrigado.
2 жыл бұрын
Eu que agradeço =)
@pedrodossantosmacieljr8979
@pedrodossantosmacieljr8979 Жыл бұрын
excelente aula
Жыл бұрын
Obrigado 🙏
@pchavesfilho
@pchavesfilho 6 ай бұрын
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.
@ronicarvalho3386
@ronicarvalho3386 2 ай бұрын
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?
@rafaelsoutodasilva2162
@rafaelsoutodasilva2162 6 ай бұрын
Muito bom meu nobre!
@brunomonteiro8889
@brunomonteiro8889 Жыл бұрын
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
@brunomonteiro8889
@brunomonteiro8889 Жыл бұрын
até adiciona a embaixo, mais quando clina para adicionar a foto, ele nao tem nenhuma ação só a primeira
@alisonsilva8390
@alisonsilva8390 5 ай бұрын
Adorei o video mano, tu é foda ! qual é o nome dessa font? onde baixo ela ?
@oficinaphp4437
@oficinaphp4437 6 ай бұрын
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?
@pichinel
@pichinel Жыл бұрын
Show!
@NOMOUSE
@NOMOUSE 2 жыл бұрын
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 ...
@fellipelorram4341
@fellipelorram4341 2 жыл бұрын
Que cara bom!!
@user-qr4dm4zw7y
@user-qr4dm4zw7y 7 ай бұрын
Muito obrigado!!
@gamebarbaruiva
@gamebarbaruiva 2 жыл бұрын
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.
@proandref
@proandref 2 жыл бұрын
Muito massa. E no caso de serem varias imagens como seria a manipulação ?
2 жыл бұрын
Mudaria um pouco o código, mas no input seria apenas adicionar o atributo multiple
@luan_ferreira_
@luan_ferreira_ 2 жыл бұрын
Uma vez fiz um joguinho de memória e usei a tag 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
@terrornaweb9739
@terrornaweb9739 Жыл бұрын
Muito bom!!!
@CLASSIUS100
@CLASSIUS100 2 жыл бұрын
professor poderia gravar um video para carregar e ler arquivos .txt em javascript.
@hugorodrigues8166
@hugorodrigues8166 2 жыл бұрын
Como que faço pra no lugar do codigo do JS eu colocar no TypeScript??
@marcelosennasenna
@marcelosennasenna Жыл бұрын
e se eu quiser colocar um arquivo em pdf posso fazer dessa maneira tbm. ?
@FoxtronGamer
@FoxtronGamer Жыл бұрын
tentei fazer mas nao funcionou
@LucasCosta-uk3wz
@LucasCosta-uk3wz Жыл бұрын
Cara, sei que faz uns 5 meses já, mas você deve ter digitado algo errado. Aqui deu certo.
@FoxtronGamer
@FoxtronGamer Жыл бұрын
@@LucasCosta-uk3wz já deu certo, fiz de outro modo 😌
@junnior8003
@junnior8003 2 жыл бұрын
Fala professo tudo bem? desistiu do backend ?
2 жыл бұрын
Nunca!!! Na verdade a parte do front-end vem justamente por conta do back-end.
@junnior8003
@junnior8003 2 жыл бұрын
@ show de bola professor! muito grato! seus curso de js/ts na udemy me ajudaram muito a dar upgrade na minha carreira de dev backend
@Gust17
@Gust17 Жыл бұрын
brigado pela aula, mais podia ser mais objetivo, colocou muita coisa no meio da explicação, ai fica meio dificil de entender
Жыл бұрын
Opa, obrigado amigo. Vou melhorar =)
@arthurcruvinel4230
@arthurcruvinel4230 11 ай бұрын
confuso pra porra em. Dava pra fazer em 5min com explicação melhor e mais simples
Por que usar o GraphQL?
21:09
Otávio Miranda
Рет қаралды 5 М.
Configuração de OmniTik + SXT Para Provedor | Verificando as Configurações da Omnitik
7:00
GLOBAL SOLUTION TELECOM (CONSULTORIA & PROJETOS)
Рет қаралды 3,4 М.
小蚂蚁被感动了!火影忍者 #佐助 #家庭
00:54
火影忍者一家
Рет қаралды 52 МЛН
The Joker saves Harley Quinn from drowning!#joker  #shorts
00:34
Untitled Joker
Рет қаралды 52 МЛН
TUDO que você deve estudar de JavaScript antes do React
1:25:24
Rocketseat
Рет қаралды 288 М.
Como criar um slider carousel só com HTML, CSS e JavaScript
23:07
Otávio Miranda
Рет қаралды 50 М.
PHP/MySQL: Upload de arquivos e imagens com salvamento no banco de dados (Atualizado 2024)
47:48
Zero Bugs - Programação em Tutorial
Рет қаралды 48 М.
Visualizar imagem antes de fazer o upload no HTML
10:14
SatellaSoft
Рет қаралды 9 М.
Criando PREVIEW DE IMAGEM ANTES DO UPLOAD com JavaScript
12:09
Freddy Danilo
Рет қаралды 377
Upload de imagens com a FETCH API do JavaScript!
22:19
Emerson Brôga Dev
Рет қаралды 9 М.
Como recortar imagem com JavaScript e fazer upload com PHP
33:44
小蚂蚁被感动了!火影忍者 #佐助 #家庭
00:54
火影忍者一家
Рет қаралды 52 МЛН