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

Поділитися
Вставка
  • Опубліковано 4 лют 2025

КОМЕНТАРІ •

  • @xenxem
    @xenxem Рік тому +1

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

  • @marianasilva7689
    @marianasilva7689 Рік тому

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

  • @alan1872
    @alan1872 Рік тому +1

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

  • @wandersonricardo7116
    @wandersonricardo7116 2 роки тому +4

    Nossa, fantástico, obrigado professor!

  • @jaelmaciel3899
    @jaelmaciel3899 Рік тому

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

  • @rafablum
    @rafablum 2 роки тому

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

    •  2 роки тому

      😉🤟

  • @indicatuweb8000
    @indicatuweb8000 2 роки тому +1

    Didática excelente. Parabéns!

  • @felipecastro2993
    @felipecastro2993 2 роки тому +1

    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

  • @estanislaupucuta931
    @estanislaupucuta931 9 місяців тому

    parabéns... muito bom o recurso

  • @edilson4082
    @edilson4082 6 місяців тому

    Parabens...Muito bom o tutorial

  • @gustavoprevelate4389
    @gustavoprevelate4389 Рік тому +2

    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.

  • @javiervieira8274
    @javiervieira8274 2 роки тому

    Incrível professor, obrigado.

    •  2 роки тому

      Eu que agradeço =)

  • @eliguto1
    @eliguto1 4 місяці тому

    Show de bola

  • @rafaelsoutodasilva2162
    @rafaelsoutodasilva2162 Рік тому

    Muito bom meu nobre!

  • @carolinapinsdorf6372
    @carolinapinsdorf6372 8 місяців тому

    Excelente video!!!!

  • @pedrodossantosmacieljr8979
    @pedrodossantosmacieljr8979 2 роки тому +1

    excelente aula

    •  2 роки тому

      Obrigado 🙏

  • @PedroReginatto-d4y
    @PedroReginatto-d4y Рік тому

    Muito obrigado!!

  • @pchavesfilho
    @pchavesfilho 11 місяців тому

    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 7 місяців тому

    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?

  • @alisonsilva8390
    @alisonsilva8390 11 місяців тому

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

  • @diegofagundes-es2mb
    @diegofagundes-es2mb 2 місяці тому

    Como faço pra mandar essa imagem que dei upload para um e-mail quando eu clicar no input de submit?

  • @MsCristinateixeira
    @MsCristinateixeira Рік тому +1

    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?

  • @fellipelorram4341
    @fellipelorram4341 2 роки тому

    Que cara bom!!

  • @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

  • @pichinel
    @pichinel 2 роки тому +1

    Show!

  • @oficinaphp4437
    @oficinaphp4437 Рік тому

    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?

  • @raphafratel
    @raphafratel Рік тому

    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])
    }
    })

  • @terrornaweb9739
    @terrornaweb9739 2 роки тому

    Muito bom!!!

  • @proandref
    @proandref 2 роки тому +1

    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

  • @marcelosennasenna
    @marcelosennasenna Рік тому

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

  • @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??

  • @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

  • @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.

  • @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 ...

    • @jcseutoca
      @jcseutoca 2 місяці тому

      Estudar rapaz kkkkkk

  • @FoxtronGamer
    @FoxtronGamer Рік тому +1

    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 роки тому +1

      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 2 роки тому

    brigado pela aula, mais podia ser mais objetivo, colocou muita coisa no meio da explicação, ai fica meio dificil de entender

    •  2 роки тому +1

      Opa, obrigado amigo. Vou melhorar =)

  • @arthurcruvinel4230
    @arthurcruvinel4230 Рік тому

    confuso pra porra em. Dava pra fazer em 5min com explicação melhor e mais simples

  • @lucianoanisiogarcia9455
    @lucianoanisiogarcia9455 2 місяці тому

    Péssimo vídeo sem uma sequencia adequada para fazer as coisas