Почему мой код не позволяет загружать один и тот же файл изображения дважды подряд? - PullRequest
Новая
       17

Почему мой код не позволяет загружать один и тот же файл изображения дважды подряд?

2 голосов
/ 02 ноября 2019

Я старался изо всех сил сократить свой код до абсолютного минимума. Я надеюсь, что это не слишком долго. Приведенный ниже код помогает загружать и удалять предварительный просмотр файлов изображений. Единственная проблема заключается в том, что он не загружает одно и то же изображение дважды подряд. То есть загрузите изображение 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>

1 Ответ

3 голосов
/ 02 ноября 2019

Вы прослушиваете 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();
}
...