为什么我的代码不允许连续两次上传相同的图像文件？

Question

我已尽我所能将我的代码减少到绝对最低限度。我希望它不会太长。下面的代码有助于上传和删除图像文件的预览。唯一的问题是它不会连续两次上传相同的图像。即上传图片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>

Answer 1

您正在侦听文件输入 #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();
}

为什么我的代码不允许连续两次上传相同的图像文件？

Why does my code not allow uploading the same image file twice in a row?

html

javascript

image-uploading