I have file input where after selecting image file a image preview is shown, Here is the jquery code
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
<input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)">
<img id="output" width="80" height="80">
<div class="img-wrap">
<button id="clear" onclick="twz()">x</a>
<img src="blob:https://www.example.com/c880bfa4-25d0-4e2b-91e4-d722b864cc79" id="output">
</div>
.img-wrap {
position: relative;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
}
There is 2 small mistakes in your code:
1- you didn't close correct your button so the right markup could be:
<input type="file" name="image_file" id="cretor" accept="image/*"onchange="loadFile(event)">
<div class="img-wrap">
<button id="clear" class="hide" onclick="twz()">x</button>
<img id="output" width="80" height="80">
2- The second is that in your css you try to select a class named close, but the markup has a id="clear" so you can change your css in this way and works fine:
.img-wrap {
position: relative;
float:left;
}
.img-wrap #clear {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
}
.hide{
display:none;
}
You can show the button only when the image is choose adding this in your script
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
$("#clear").removeClass("hide");
};
</script>