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

Question

我正在创建一个如下所示的图像上传器：

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

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

您隐藏了上面有事件侦听器的 Dropbox，所以这就是它不起作用的原因。

Answer 2

好的，我设法通过添加使按钮工作：

img.height = Math.max($('#dropbox').height(),$('#preview').height()) ;
img.width = Math.max($('#dropbox').width(),$('#preview').width()) ;

$(dropbox).addClass('hidden');
$(preview).removeClass('hidden');
$(preview).empty();

(codepen updated)

我仍然无法按照问题中的说明进行拖放操作