Javascript 将图像从浏览器窗口拖动到输入文件

我开发了一个文件输入，有没有办法将图像从浏览器窗口拖动到输入中

有人能帮我创建一个事件，当我将图像拖动到输入时，它允许我获取图像吗

此时，我通过使用ctrl-v获取图像来创建一个事件，但是否可以通过从浏览器窗口拖放来获取它

谢谢大家!

在此处拖放/粘贴您的图像

输入中必须有一个ondrop事件，如下所示：

---

我检查了你的演示，你已经有了@HostListener（“粘贴”、[“$event”]） onPaste（）

您可以添加以下内容：

 @HostListener("dragover", ["$event"]) public onDragOver(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#999"; }

@HostListener("dragleave", ["$event"]) public onDragLeave(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#eee"; }

@HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#eee';

let files: FileHandle[] = [];
for (let i = 0; i < evt.dataTransfer.files.length; i++) {
  const file = evt.dataTransfer.files[i];
  const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
  files.push({ file, url });
}
if (files.length > 0) {
  this.files.emit(files);
}  }

@HostListener（“dragover”[“$event”]）公共onDragOver（evt:DragEvent）{
evt.preventDefault（）；
evt.stopPropagation（）；
this.background=“#999”}
@HostListener（“dragleave”，[“$event”]）公共onDragLeave（evt:DragEvent）{
evt.preventDefault（）；
evt.stopPropagation（）；
this.background=“#eee”}
@HostListener（'drop'，['$event']）公共onDrop（evt:DrageEvent）{
evt.preventDefault（）；
evt.stopPropagation（）；
this.background='eee'；
让文件：FileHandle[]=[]；
for（设i=0；i0）{
this.files.emit（文件）；
}  }

在html中，您应该添加一个appDrag（files）=“filesdroped（$event）

---

检查此链接，它可以帮助您，它使用HostBinding和HostListener。@非常感谢，我已经测试了此示例，但是当我从浏览器拖动图像时，它没有检测到：（您是否将演示用作模板？如果是，我在下面添加了一个答案，应该会有帮助，谢谢，但它不起作用…当您拖动它试图在另一个窗口中打开的图像时：（非常感谢您的帮助。我试图实现，但出现了一些错误，您可以发布演示吗？非常感谢您againit应该可以帮助您解决这个问题。奇怪的是，我尝试将图像从浏览器拖到输入，并执行了几个console.log（）操作，但未检测到任何内容：（你能把你的代码放在stackblitz上吗，我可以看一看或者贴出你收到的确切错误我用了你的stackblitz示例，当我拖动图像时没有发生任何事情，即使是使用console.log…似乎函数没有执行…你也会发生同样的情况吗？

 @HostListener("dragover", ["$event"]) public onDragOver(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#999"; }

@HostListener("dragleave", ["$event"]) public onDragLeave(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#eee"; }

@HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#eee';

let files: FileHandle[] = [];
for (let i = 0; i < evt.dataTransfer.files.length; i++) {
  const file = evt.dataTransfer.files[i];
  const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
  files.push({ file, url });
}
if (files.length > 0) {
  this.files.emit(files);
}  }