0

Estou tentando dar um preview na imagem, porém não consigo.

Criei o seguinte código em javascript puro:

var imageFileInput = document.getElementById("fileUpload");
imageFileInput.onchange = function(event){
    if(typeof (FileReader) != "undefined"){
    var previewIMG = document.getElementById("image-holder");
    previewIMG.innerHTML = "";
    var reader = new FileReader();
    reader.onload = function(event){
        var imagemMostrada = document.createElement("img");
        imagemMostrada.src = event.target.result;
        imagemMostrada.className = "";
        previewIMG.appendChild(imagemMostrada);
        reader.readAsDataURL(this[0].files[0]);
    }
}else{
    alert("Esta versão do navegador não oferece suporte ao Pré-visualizador");
}
};

e o HTML está assim;

<div>
    <label>
        <input type="file" name="imagem-carta" id="fileUpload" accept="image/*">
    </label>
    <div>
        <div id="image-holder"></div>
        <label for="fileUpload">Alterar imagem</label>
    </div>
</div>

Existe algum erro (nada foi apontado no console)? como posso corrigí-lo ?

var imageFileInput = document.getElementById("fileUpload");
imageFileInput.onchange = function(event){
	if(typeof (FileReader) != "undefined"){
    var previewIMG = document.getElementById("image-holder");
    previewIMG.innerHTML = "";
    var reader = new FileReader();
    reader.onload = function(event){
    	var imagemMostrada = document.createElement("img");
    	imagemMostrada.src = event.target.result;
    	imagemMostrada.className = "";
    	previewIMG.appendChild(imagemMostrada);
    	reader.readAsDataURL(this[0].files[0]);
    }
}else{
	alert("Esta versão do navegador não oferece suporte ao Pré-visualizador");
}
};
<div>
				<label>
					<input type="file" name="imagem-carta" id="fileUpload" accept="image/*">
				</label>
				<div>
					<div id="image-holder"></div>
					<label for="fileUpload">Alterar imagem</label>
				</div>
			</div>

1 Resposta 1

3

O reader.readAsDataURL esta dentro do onload e como o onload nunca é executado o reader.readAsDataURL (praticamente um paradoxo!?), ou coisa é que o this[0] esta errado, o Event (onchange) só retorna o elemento atual e no caso deve usar apenas this, corrigido:

var imageFileInput = document.getElementById("fileUpload");
imageFileInput.onchange = function(event){
    if(typeof (FileReader) != "undefined"){
        var previewIMG = document.getElementById("image-holder");
        previewIMG.innerHTML = "";
        var reader = new FileReader();
        reader.onload = function(event){
            var imagemMostrada = document.createElement("img");
            imagemMostrada.src = event.target.result;
            imagemMostrada.className = "";
            previewIMG.appendChild(imagemMostrada);
        }
        reader.readAsDataURL(this.files[0]);
    } else {
        alert("Esta versão do navegador não oferece suporte ao Pré-visualizador");
    }
};
<div>
    <label>
        <input type="file" name="imagem-carta" id="fileUpload" accept="image/*">
    </label>
    <div>
        <div id="image-holder"></div>
        <label for="fileUpload">Alterar imagem</label>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .