文件拖动&;删除在IE11JavaScript中不工作的内容

文件拖动&;删除在IE11JavaScript中不工作的内容,javascript,angular,Javascript,Angular,我试图在Angular 5中创建一个自定义指令,该指令可以将任何div转换为dropzone,以便用户可以将文件从操作系统拖放到浏览器以上载它。该指令在chrome中运行良好,但在IE11中不起作用。我在这里面临的问题是event.dataTransfer.filesFileList对象是空的,但是对于Chrome,文件就存在于其中。以下是我迄今为止应用的事件处理程序 @HostListener('drop', [ '$event' ]) public onDrop(event: any

我试图在Angular 5中创建一个自定义指令,该指令可以将任何div转换为dropzone,以便用户可以将文件从操作系统拖放到浏览器以上载它。该指令在chrome中运行良好,但在IE11中不起作用。我在这里面临的问题是
event.dataTransfer.files
FileList对象是空的,但是对于Chrome,文件就存在于其中。以下是我迄今为止应用的事件处理程序

  @HostListener('drop', [ '$event' ])
  public onDrop(event: any): void {
    console.log('In On Drop Event');
    event.preventDefault();
    event.stopPropagation();
    console.log(event.dataTransfer.files, 'Files dropped in the drop zone');
  }

  @HostListener('dragover', [ '$event' ])
  public onDragOver(event: any): void {
    console.log('In On Drag Over Event');
    event.preventDefault();
    event.stopPropagation();
    event.dataTransfer.dropEffect = 'copy';
  } 
这是我能够处理的仅有的两个拖动事件,因为dragstart效果不适用于从操作系统拖动文件并将其放到浏览器中。我几乎用尽了所有的选择,任何建议都会在这里出现。

来自caniuse:

IE11仅部分支持拖放

dataTransfer.items仅受Chrome支持

目前没有浏览器支持dropzone属性

Firefox支持.setDragImage的任何类型的DOM元素。Chrome必须将HTMLImageElement或任何类型的DOM元素附加到DOM,并位于.setDragImage浏览器的视口中

1部分支持是指不支持dataTransfer.files或.types对象

2部分支撑是指不支撑。设置绘图

3部分支持是指dataTransfer.setData/getData的有限支持格式

您可能需要搜索polyfill或回退来直接使用文件输入而不是DnD上载文件