i have tried as best as I could to reduce my code to the absolute minimum. I hope it's not too long. The below code helps upload and remove the preview of image files. The only problem is that it doesn't upload the same image twice in a row. That is, upload image a, remove image a and upload it again. Basically nothing happens and the default image remains there when I try to upload image a second time right after removing it. but uploading image a and then replacing it with image b is working without a problem. I couldn't find the bug in my code. I am a beginner learning html-javascript and dont know how to solve this. Any help is appreciated, thanks!
<!DOCTYPE html >
<html lang="en" style="background: #fffff0;">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" media="all" href="upload.css">
<script type=text/javascript src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body >
<img id="imgPreview" src="default.png" width="500px" height="360px" style="padding-left:15px;" />
<br/>
<input type="file" id="image" style="display: none;" />
<!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->
<a href="javascript:changeProfile()">
<span class="btn btn-default btn-file" id="bildBttn">
<i title="Bild auswählen" class="fa fileinput-new fa-file-image-o" id="fotoIcon"></i></span>
</a>
<a id="removeBttnFrame" href="javascript:removeImage()">
<div id="btnDeletePhoto" class="removeBttnClass" style="display: none"><i class="fa fa-trash-o" id="deleteIcon"></i></div>
</a>
<script src="uploadScript.js" data-turbolinks-track="reload"></script>
</body>
</html>
my css file:
#bildBttn{
position: absolute;
top: 38%;
left: 18.2%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: white;
cursor: pointer;
border-radius: 5px;
color: black;
text-align: center;
border-color: lightgray;
height: 50px ! important;
width: 53px;
border-radius: 4px;
padding: 10x 17px;
border-width: thin
}
.removeBttnClass {
position: absolute;
top:38%;
left: 22.7%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: white;
cursor: pointer;
border-radius: 5px;
color: black;
text-align: center;
border-color: lightgray;
height: 50px ! important;
width: 53px;
border-radius: 4px;
padding: 10x 17px;
border-width: thin
}
javascript:
function changeProfile() {
$('#image').click();
}
$('#image').change(function () {
var imgPath = this.value;
var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
readURL(this);
else
alert("Please select image file (jpg, jpeg, png).")
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#imgPreview').attr('src', e.target.result);
addDeleteBttn();
};
}
}
function removeImage() {
$('#imgPreview').attr('src', 'Anzeige%20erstellen-Dateien/default.png');
removeDeleteBttn();
}
function addDeleteBttn() {
document.getElementById("btnDeletePhoto").style.display = "block";
}
function removeDeleteBttn() {
document.getElementById("btnDeletePhoto").style.display = "none";
}