John Hebert Trindade Posted December 28, 2023 at 10:13 PM Report Share #632557 Posted December 28, 2023 at 10:13 PM (edited) Boa noite, cá estou eu novamente a necessitar de vossa ajuda. Vi o video seguinte do professor Celke a fazer um preview de imagens. https://youtu.be/sWzW4TJ4ta4?si=i88K8iUSPFhGolSy Na video aula existe o seguinte código: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Celke - Preview de Múltiplas Imagens</title> </head> <body> <h2>Preview de Múltiplas Imagens</h2> <!-- Inicio do formulário --> <form> <!-- Campo para selecionar as imagens --> <input type="file" name="inputImagens" id="inputImagens" multiple accept="image/*"><br><br> <!--<input type="file" name="inputImagens" id="inputImagens" multiple>--> </form> <!-- Fim do formulário --> <!-- Receber o preview das imagens --> <span id="previewImagem"></span> <script> // Receber o seletor do campo com as imagens const inputImagens = document.getElementById("inputImagens"); // Receber o seletor para enviar o preview das imagens const previewImagem = document.getElementById("previewImagem"); // Aguardar alteração no campo de imagens inputImagens.addEventListener("change", function (e) { // Limpar o seletor que recebe o preview das imagens previewImagem.innerHTML = ""; // Percorrer a lista de arquivos selecionados for (const arquivo of e.target.files) { console.log(arquivo); // Criar a TAG <img>, no atributo src atribuir a imagem e no atributo alt o nome const imagemHTML = `<img src="${URL.createObjectURL(arquivo)}" alt="${arquivo.name}" style="max-width: 200px; margin: 10px;">`; // Enviar para o HTML a imagem, beforeend - adicionar a image no final previewImagem.insertAdjacentHTML("beforeend", imagemHTML); } }); </script> </body> </html> gostaria de chamar o script através de uma função em um arquivo javascript O modelo da Celke funciona, mas no meu não aparece me o seguinte erro: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at reader.onload (custom_adms.js) meu código: <input type="file" class="input-adm" name="new_image[]" id="new_image" onchange="previewImg()" multiple="multiple" accept="image/*" /> <span id="previewImage"></span> //preview multiplas imagens function previewImg() { // Receber o seletor do campo com as imagens const new_imageMultiple = document.getElementById("new_image"); // Receber o seletor para enviar o preview das imagens const previewImage = document.getElementById("previewImage"); // Aguardar alteração no campo de imagens new_imageMultiple.addEventListener("change", function (e) { // Limpar o seletor que recebe o preview das imagens previewImage.innerHTML = ""; // Percorrer a lista de arquivos selecionados for (const arquivo of e.target.files) { // Criar a TAG <img>, no atributo src atribuir a imagem e no atributo alt o nome const imagemHTML = `<img src="${URL.createObjectURL(arquivo)}" alt="${arquivo.name}" style="max-width: 200px; margin: 10px;">`; // Enviar para o HTML a imagem, beforeend - adicionar a image no final previewImage.insertAdjacentHTML("beforeend", imagemHTML); } }); } Edited December 29, 2023 at 08:17 PM by John Hebert Trindade Link to comment Share on other sites More sharing options...
Solution John Hebert Trindade Posted December 29, 2023 at 10:12 PM Author Solution Report Share #632567 Posted December 29, 2023 at 10:12 PM boa noite a todos. Consegui resolver fazendo conforme o video no link abaixo e esta a funcionar a 1000% https://youtu.be/qpxi-fKffB4?si=IscASFONU5riPLgl Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now