为什么用户每次删除上传的图像预览时都会刷新我的HTML页面？

Question

我有以下代码可上传图像预览。一旦上传了默认图像以外的图像，也会出现删除按钮。当我单击此按钮删除图像预览时，页面将刷新，这将导致删除所有用户输入。我不知道出了什么问题或在哪里寻找。我在这里想念什么？

<div class="row fileinput-control">
  <img id="preview"  
       src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
  <br/>
  <input type="file" id="image" style="display: none;" />
  <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->


  <a href="javascript:changeProfile()">
    <div class="file-btns">
      <span class="btn btn-default btn-file" id="bildChoose">
        <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i>
      </span>
    </div>
  </a>        
  <a id="removeBttnFrame" href="javascript:removeImage()"></a>
  <div class="col-sm-6">
    <textarea class="form-control copyright" 
              placeholder="Geben Sie hier die Bildquelle an: Foto­graf, Lizenz, ...
    Ohne Quellen­an­ga­ben kann das Bild nicht angezeigt werden."
              name="offer[photo_copyright]" 
              id="offer_photo_copyright"></textarea>
    <div class="fileinput-description"></div>
  </div>
</div>


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) {
      $('#preview').attr('src', e.target.result);
      // $("#remove").val(0);
    };
  }
}

function removeImage() {
  $('#preview').attr('src', 'noimage.jpg');
  // $("#remove").val(1);
  $('#preview').attr('src', 'Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png');
}

function    addDeleteBttn() {
    var removeBttn = document.createElement("BUTTON");
    removeBttn.title="Entfernen";
    removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'

    removeBttn.className="removeBttnClass";

    document.getElementById("removeBttnFrame").appendChild(removeBttn);
}

Answer 1

请检查您的以下代码。我没有任何错误。页面没有刷新。让我知道您是否正在寻找其他东西。我刚刚将按钮重命名为“删除X”，因为此处未包含超棒的字体。

<div class="row fileinput-control">
   <img id="preview"  
      src="https://img.etimg.com/thumb/msid-68333505,width-643,imgsize-204154,resizemode-4/googlechrome.jpg" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
   <br/>
   <input type="file" id="image" style="display: block;" />
   <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->
   <a href="javascript:changeProfile()">
      <div class="file-btns">
         <span class="btn btn-default btn-file" id="bildChoose">
         <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i>
         </span>
      </div>
   </a>
   <a id="removeBttnFrame" href="javascript:removeImage()"></a>
   <div class="col-sm-6">
      <textarea class="form-control copyright" 
         placeholder="Geben Sie hier die Bildquelle an: Foto­graf, Lizenz, ...
         Ohne Quellen­an­ga­ben kann das Bild nicht angezeigt werden."
         name="offer[photo_copyright]" 
         id="offer_photo_copyright"></textarea>
      <div class="fileinput-description"></div>
   </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   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) {
         $('#preview').attr('src', e.target.result);
         // $("#remove").val(0);
       };
     }}

   function removeImage() {
     $('#preview').attr('src', 'noimage.jpg');
     // $("#remove").val(1);
     $('#preview').attr('src', 'https://img.etimg.com/thumb/msid-68333505,width-643,imgsize-204154,resizemode-4/googlechrome.jpg');
     }

     function    addDeleteBttn() {
       var removeBttn = document.createElement("BUTTON");
       removeBttn.title="Entfernen";
       removeBttn.innerHTML='Remove X'

       removeBttn.className="removeBttnClass";
    document.getElementById("removeBttnFrame").appendChild(removeBttn);
    }
</script>