Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como pegar foto através de um form e montar uma div

por Estudante
| 53.1k xp | 2 posts

Olá, eu tô estudando mais sobre forms e fiz um que é possível enviar foto:

            <form id="form-produto">
              <div class="form-row">
                   <div class="form-group col-md-12">
                        <label>Foto do produto</label><br>
                        <input id="fotoProduto" type="file" accept="image/*" capture>
                    </div> 
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="cadastroProduto">Nome do produto</label>
                        <input type="text" class="form-control" id="nomeProduto">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="cadastroPCompra">Valor de compra</label>
                        <input type="number" class="form-control" id="valorCompra" placeholder="R$">
                    </div>
                    <div class=" form-group col-md-6">
                        <label>Valor de venda</label>
                        <input type="number" class="form-control" id="valorVenda" placeholder="R$">
                    </div>
                </div>


                    <div class="form-group col-md-12">
                        <label>Cor</label>
                        <input type="text" class="form-control" id="corProduto">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label>Descrição</label><br>
                        <textarea id="descricaoProduto" class="form-control"></textarea>
                    </div>
                </div>
            </form>

desse formulário vou montar um card com a foto e o nome do produto:

                <div class="col-md-4 card-box">
                    <div id="cardProduto" class="card" style="width: 18rem;">
                        <img src="" class="card-img-top" id="fotoProduto">
                        <div class="card-body">
                            <h5 class="card-titulo"></h5>
                            <a href="#" class=" btn-block btn-produto">Detalhes</a>
                        </div>
                    </div>
                </div>

como eu posso fazer pra pegar a foto através do form e montar na div usando javascript?

3 respostas
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Larissa, tudo bem? Nesse caso você poderia adicionar um listener para o campo file:

const inputFile = document.getElementById('fotoProduto')
inputFile.addEventListener('change', event => {})

Ai dentro do event poderia pegar os arquivos:

const inputFile = document.getElementById('fotoProduto')
inputFile.addEventListener('change', event => {
    console.log(event.target.files[0])
})

Nesse caso seria a única imagem selecionada, mas, caso o input permita selecionar múltiplas imagens poderia pegar o files.

Depois você pode usar o URL.createObjectURL para criar uma URL temporária e vinculá-la a algum src de uma img.

const inputFile = document.getElementById('fotoProduto')
const img = document.getElementById('imagem')
inputFile.addEventListener('change', event => {
    const url = URL.createObjectURL(event.target.files[0])
    img.src = url
})

A ideia seria mais ou menos essa.

Espero ter ajudado.

por Estudante
| 53.1k xp | 2 posts

Oi Matheus, obrigado!

Só mais uma dúvida, eu pretendo criar um objeto produto pegando os dados do form, nesse caso fiz assim:

 var produto = {
        foto: form.foto.value,
        nome: form.nome.valuea,
        valorCompra: form.valorCompra.value,
        valorVenda: form.valorVenda.value,
        cor: form.cor.value,
        descricao: form.descricao.value
    }

pra pegar os dados da foto e incorporar ali no foto: form.foto.value, usaria o mesmo código que vc passou? estou um pouco confusa como fazer essa parte

solução!
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Larissa, sim, você poderia pegar o event.target.files[0] e criar um FormData:

const data = new FormData()
data.append('file', event,target.files[0])

E enviar esse data para sua API.

Espero ter ajudado.