javascript - 图片拖放、上传——只允许上传一张图片？

Question

我正在创建一个如下所示的图像 uploader :

这就是我想要发生的事情:

1. 用户可以上传的图片总数为一张。换句话说，如果用户尝试上传另一张图像，前一张图像就会被删除。
2. 当用户将图像放入灰色区域时，它就会出现
3. 当用户点击上传图片时，就会出现

我设法让 2 和 3 工作。请在此处查看 codepen 上的代码: http://codepen.io/aseelaldallal/pen/QdwYgv/

这是我的问题:

1. 假设用户将图像放入灰色框中(或单击上传图像)。图像出现。现在，假设他/她试图将另一张图像放在第一张图像之上。应该发生的情况是第一个图像被删除，然后新图像出现。不幸的是，这不起作用。

2. 假设用户将图像放入灰色框中(或单击上传图像)。图像出现。现在假设用户单击上传图像并选择另一张图像。什么都没发生。原始图像仍然存在。

这是我的代码(或者只需单击上面的 codepen 链接):

HTML:

<div id="imageBorder" class="container">

  <div id="imageContainer">

    <div id="dropbox">
      <i class="fa fa-picture-o" aria-hidden="true"></i>
      <p> Drop image here or click to upload</p>
    </div>

    <div id="preview" class="hidden">
    </div>

    <button id="fileSelect" class="btn btn-primary btn-block">Upload Image</button>
  </div>
</div>

JS

  $(document).ready(function() {

      var dropbox = document.getElementById("dropbox"),
          fileElem = document.getElementById("fileElem"),
          fileSelect = document.getElementById("fileSelect");

      fileSelect.addEventListener("click", function(e) {
          if (fileElem) {
              fileElem.click();
          }
      }, false);

      dropbox.addEventListener("dragenter", dragenter, false);
      dropbox.addEventListener("dragover", dragover, false);
      dropbox.addEventListener("drop", drop, false);
  });

function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
}

function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
}

function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    var dt = e.dataTransfer;
    var files = dt.files;
    handleFiles(files);
}

function handleFiles(files) {
    var file = files[0];
    var imageType = /^image\//;
    if (!imageType.test(file.type)) {
        alert("NOT AN IMAGE");
        return;
    }
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    img.height = $('#dropbox').height();
    img.width = $('#dropbox').width();
    $(dropbox).addClass('hidden');
    $(preview).removeClass('hidden');
    preview.appendChild(img);
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(file)
}

CSS

#imageBorder {
  padding: 1rem;
  border-radius: 5px;
  box-sizing: border-box;
  height: 300px;
  width: 550px;
  border: 1px solid #ccc;
}

#imageContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#dropbox {
  border-radius: 5px;
  text-align: center;
  color: gray;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  background-color: #e7e7e7;
  height: 100%;
  margin-bottom: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#dropbox i {
  font-size: 6.5rem;
  margin-bottom: 1rem;
}

#dropbox p {
  font-size: 2rem;
  margin-top: 1rem;
}

#preview {
  text-align: center;
  height: 100%;
  margin-bottom: 2%;
}

我尝试了像添加这样简单的事情

$(preview).empty() before preview.appendChild(img)... Didn't work .

有什么想法吗？

Answer 1

您隐藏了带有事件监听器的保管箱，因此这就是它不起作用的原因。