Script for preview not working

Question

Script for preview not working

Navigation

#1 by (3 votes)

0

I'm trying to preview the image, but I can not.

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 the HTML looks 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 a bug (nothing pointed to 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

asked by anonymous 26.07.2017 / 16:34

1 answer

Extract and include SQL data with R Creating field with weight format with two decimal places and 3 houses before the comma

score 3 · Accepted Answer

The reader.readAsDataURL is within the onload and as the onload never executes the reader.readAsDataURL (practically a paradox !?), or thing is that this[0] is wrong, Event (onchange) only returns the element current and in this case you should only use 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>