整个页面文件拖放（angular）

Question

我想使用 Angular 制作整个页面文件的拖放解决方案。我的意思是，用户可以将文件拖到页面的任何位置，一旦他这样做，就会出现一条消息，提示“将其拖到上传”（或类似的内容）。

我找到了 this codepen（下面的片段），但它是在 JS 中，我想用 Angular 来实现。有人可以帮忙吗？

var lastTarget = null;

function isFile(evt) {
    var dt = evt.dataTransfer;

    for (var i = 0; i < dt.types.length; i++) {
        if (dt.types[i] === "Files") {
            return true;
        }
    }
    return false;
}

window.addEventListener("dragenter", function (e) {
    if (isFile(e)) {
        lastTarget = e.target;
        document.querySelector("#dropzone").style.visibility = "";
        document.querySelector("#dropzone").style.opacity = 1;
        document.querySelector("#textnode").style.fontSize = "48px";
    }
});

window.addEventListener("dragleave", function (e) {
    e.preventDefault();
    if (e.target === lastTarget || e.target === document) {
        document.querySelector("#dropzone").style.visibility = "hidden";
        document.querySelector("#dropzone").style.opacity = 0;
        document.querySelector("#textnode").style.fontSize = "42px";
    }
});

window.addEventListener("dragover", function (e) {
    e.preventDefault();
});

window.addEventListener("drop", function (e) {
    e.preventDefault();
    document.querySelector("#dropzone").style.visibility = "hidden";
    document.querySelector("#dropzone").style.opacity = 0;
    document.querySelector("#textnode").style.fontSize = "42px";
    if(e.dataTransfer.files.length == 1)
    {
        document.querySelector("#text").innerHTML =
            "<b>File selected:</b><br>" + e.dataTransfer.files[0].name;
    }
});

@import url(https://fonts.googleapis.com/css?family=Oswald);
 body {
    font-size:24px;
    font-family:Oswald, Tahoma, sans-serif;
}
div#text {
    margin-top:48px;
    text-align:center;
}
div#dropzone {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: visibility 175ms, opacity 175ms;
    display: table;
    text-shadow: 1px 1px 2px #000;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    font: bold 42px Oswald, DejaVu Sans, Tahoma, sans-serif;
}
div#textnode {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    transition: font-size 175ms;
}

<div style="visibility:hidden; opacity:0" id="dropzone">
    <div id="textnode">Drop anywhere!</div>
</div>
<div id=text>Drag a file anywhere</div>

Answer 1

您需要将您的 js 代码调整为打字稿，试试这个。

lastTarget: any = null;

isFile(evt) {
  var dt = evt.dataTransfer;

  for (var i = 0; i < dt.types.length; i++) {
    if (dt.types[i] === "Files") {
      return true;
    }
  }
  return false;
}

ngOnInit(): void {
  window.addEventListener("dragenter", (e) =>{
    if (this.isFile(e)) {
      this.lastTarget = e.target;
      document.querySelector("#dropzone").setAttribute("style", "visibility: ''");
      document.querySelector("#dropzone").setAttribute("style", "opacity: 1");
      document.querySelector("#textnode").setAttribute("style", "fontSize: 48px");
    }
  });
  
  window.addEventListener("dragleave", (e) =>{
    e.preventDefault();
    if (e.target === this.lastTarget || e.target === document) {
      document.querySelector("#dropzone").setAttribute("style", "visibility: hidden");
      document.querySelector("#dropzone").setAttribute("style", "opacity: 0");
      document.querySelector("#textnode").setAttribute("style", "fontSize: 42px");
    }
  });
  
  window.addEventListener("dragover", (e) =>{
    e.preventDefault();
  });
  
  window.addEventListener("drop", (e) =>{
    e.preventDefault();
    document.querySelector("#dropzone").setAttribute("style", "visibility: hidden");
    document.querySelector("#dropzone").setAttribute("style", "opacity: 0");
    document.querySelector("#textnode").setAttribute("style", "fontSize: 42px");
    if (e.dataTransfer.files.length == 1) {
      document.querySelector("#text").innerHTML =
        "<b>File selected:</b><br>" + e.dataTransfer.files[0].name;
    }
  });
}

整个页面文件拖放（angular）

Entire page File Drag and Drop (angular)

drag-and-drop

angular