Image Preview

Question

Image Preview

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm doing a preview, and it's happening like this, I want nothing to appear as if there is no image, and only the preview image appears when the user chooses the image.

It's getting so before putting the image, however I want it not to have this form without image:

Code:

JavaScript

varloadFile=function(event){varoutput=document.getElementById('output');output.src=URL.createObjectURL(event.target.files[0]);}

Htmlthattakestheimageandshows

<imgid="output" style="width:100%;height:250px;padding:10px 10px 10px 10px;"/>
<br>
<br>
<input type="file" name="img" id="img" accept="image/jpg, image/jpeg, image/png" onchange="loadFile(event)"/>
<br/><br/>

javascript html imagem

asked by anonymous 30.05.2018 / 19:32

2 answers

0

You can leave the image as a default path for an explanatory image (something like "Select your file") or even a transparent 1x1 gif.

This will display that image until the user selects it.

<img src="sem-imagem.jpg" id="output" style="width:100%;height:250px;padding:10px 10px 10px 10px;"/>
<br>
<br>
<input type="file" name="img" id="img" accept="image/jpg, image/jpeg, image/png" onchange="loadFile(event)"/>
<br/><br/>

Or even hide the image until something has been selected, but I find the first option more interesting.

30.05.2018 / 19:37

Laravel: Access relationship attributes What am I doing wrong when using LET (Kotlin)?

score 0 · Accepted Answer

You can leave the image without opacity by adding opacity: 0 to style:

<img src="sem-imagem.jpg" id="output" style="opacity: 0; width:100%;height:250px;padding:10px 10px 10px 10px;"/>

In the function, change the opacity to 1:

var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.style.opacity = "1";
}

Or you can use visibility: hidden and change in function to visibility: visible :

In function:

var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.style.visibility= "visible";
}