Question

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

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

用户可以上传的图片总数为1。换句话说，如果用户尝试上传另一个图像，则删除前一个图像。
当用户将图像放入灰色区域时，会出现
当用户点击上传图片时，会显示

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

以下是我的问题：

假设用户将图像放入灰色框（或单击上传图像）。图像出现。现在，说他/她试图在第一个图像的顶部放下另一个图像。应该发生的是第一张图像被删除，并出现新图像。不幸的是，这不起作用。
假设用户将图像放入灰色框（或单击上传图像）。图像出现。现在说用户点击上传图片并选择另一张图片。什么都没发生。原始图像仍然存在。

这是我的代码（或者只需点击上面的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

好吧，我通过添加：

设法让按钮正常工作

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）

我仍然无法按照问题

中的指定拖放工作

Answer 2

您正在隐藏包含事件监听器的保管箱，这就是它无法正常工作的原因。

图片拖放，上传 - 只允许上传一张图片？

2 个答案: