, wie in der rechten Ecke des Bildes

Question

Schaltfläche Löschen zeigen, dass ich Datei Eingang, wo nach dem Vorschaubilddatei ein Bild ausgewählt wird gezeigt, ist hier die jQuery-Code

<script> 
    var loadFile = function(event) { 
    var output = document.getElementById('output'); 
    output.src = URL.createObjectURL(event.target.files[0]); 
    }; 
</script> 

Html Code->

<input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)"> 
<img id="output" width="80" height="80"> 

Die obigen Codes erzeugen sofort nach der Auswahl eines Bildes eine Bildvorschau, aber wie kann ich die Löschtaste in der oberen rechten Ecke des Bildes anzeigen und die Dateieingabe zurücksetzen und das Bild entfernen

hier ist, was ich versucht habe Löschen-Button am oberen rechten Ecke des Bildes zu zeigen

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

CSS

.img-wrap { 
    position: relative; 

} 
.img-wrap .close { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
    z-index: 100; 

} 

Nun, wie i-Taste erzeugen kann und es in der rechten Ecke platzieren, weil loadfile Funktion nur Bildvorschau

Answer 1

Es erzeugt ist 2 Fehler in Ihrem Code:

1- Sie haben nicht richtig geschlossen Ihre button, so dass die richtige Markup sein sollte:

<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- Die zweite ist, dass Sie in Ihrem CSS versuchen, eine Klasse wählen close benannt, aber das Markup hat ein id="clear" so können Sie Ihre CSS auf diese Weise ändern, und es wird funktionieren:

.img-wrap { 
position: relative; 
float:left; 
} 

.img-wrap #clear { 
position: absolute; 
top: 2px; 
right: 2px; 
z-index: 100; 

} 

.hide{ 
    display:none; 
} 

Sie können die Schaltfläche nur anzeigen, wenn das Bild ausgewählt wurde, indem Sie die Klasse hide aus der Schaltfläche entfernen. Ihr Skript wird:

<script> 
var loadFile = function(event) { 
var output = document.getElementById('output'); 
output.src = URL.createObjectURL(event.target.files[0]); 
$("#clear").removeClass("hide"); 
}; 
</script>