JavaScript - очистка элемента

0

У меня есть сценарий, который принимает изображение, подлежащее загрузке, и добавляет предварительный просмотр изображения. Единственная проблема заключается в том, что если форма заполняется снова, предыдущее изображение не очищается.

Идентификатор места размещения миниатюр - это "миниатюра". Может ли кто-нибудь помочь мне добавить строку или два кода для этого, который очищает div перед добавлением нового предварительного просмотра изображения?

<script> 
    jQuery(function($){
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files);
},false)

fileDiv.addEventListener("click",function(e){
  $(fileInput).show().focus().click().hide();
  e.preventDefault();
},false)

fileDiv.addEventListener("dragenter",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);

fileDiv.addEventListener("dragover",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);

fileDiv.addEventListener("drop",function(e){
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  showThumbnail(files);
},false);

function showThumbnail(files){

    // clear the div

  for(var i=0;i<files.length;i++){
    var file = files[i]
    var imageType = /image.*/
    if(!file.type.match(imageType)){
      console.log("Not an Image");
      continue;
    }

    var image = document.createElement("img");
    // image.classList.add("")
    var thumbnail = document.getElementById("thumbnail");
    image.file = file;
    thumbnail.appendChild(image)

    var reader = new FileReader()
    reader.onload = (function(aImg){
      return function(e){
        aImg.src = e.target.result;
      };
    }(image))
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    image.onload= function(){
      ctx.drawImage(image,100,100)
    }
  }
}
          });
          </script>
Теги:
dom

1 ответ

0
Лучший ответ
thumbnail.innerHTML = ''

который очистит содержимое миниатюр. впоследствии вы можете добавить изображение так же, как в своем коде.

Изменение: вы должны действительно использовать jQuery, чтобы избежать кросс-браузерных головных болей:

$('#thumbnail').empty();

это также очищает элемент эскиза, но отбрасывает проблему с перекрестным браузером в jQuery.

  • 0
    Где я должен положить это? Я добавил его сразу после // очистки комментария div, но он полностью прервал предпросмотр изображения
  • 0
    Эта вторая строка, редактирование, работала отлично! Спасибо!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню