我已尽我所能将我的代码减少到绝对最低限度。我希望它不会太长。下面的代码有助于上传和删除图像文件的预览。唯一的问题是它不会连续两次上传相同的图像。即上传图片a，移除图片a，重新上传。当我尝试在删除图像后再次上传图像时，没有任何反应，默认图像仍然存在。但是上传图像 a 然后用图像 b 替换它是没有问题的。我在我的代码中找不到错误。我是学习 HTML-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";
}
``
`#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
}```
<!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>最佳答案
您正在监听文件输入 #image 上的 change 事件。
当您删除图像时，您根本没有触及 #image 元素。
function removeImage() {
$("#imgPreview").attr("src", "Anzeige%20erstellen-Dateien/default.png");
removeDeleteBttn();
}
当您再次上传同一张图片时，#image 上的change 事件将不会被触发。
要为同一文件上传强制更改事件，您需要更改 removeImage 函数中的 #image 元素。
像这样。
function removeImage() {
$("#imgPreview").attr("src", "Anzeige%20erstellen-Dateien/default.png");
//Setting image val to "" to force a change event on same file upload
$("#image").val("");
removeDeleteBttn();
}
关于javascript - 为什么我的代码不允许连续两次上传相同的图像文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58667056/