Script to preview not working

Asked

Viewed 56 times

0

I’m trying to preview the image, but I can’t.

I created the following code in pure javascript:

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");
}
};

and HTML is like this;

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

Is there an error (nothing was pointed out on the console)? how can I fix it ?

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>

javascript html

1 answer

3


The reader.readAsDataURL this inside onload and as onload is never executed the reader.readAsDataURL (practically a paradox!? ), or thing is that the this[0] wrong, Event (onchange) only returns the current element and in case should use only this, corrected:

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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.