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

您正在监听文件输入change上的#image事件。

删除图像时，您根本不会触摸#image元素。

function removeImage() {
  $("#imgPreview").attr("src", "Anzeige%20erstellen-Dateien/default.png");
  removeDeleteBttn();
}

再次上传同一张图片时，不会触发change上的#image事件。

要为同一文件上载更改事件，您需要从#image函数中更改removeImage元素。

这样的事情。

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();
}

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

1 个答案: