文件拖放在 IE11 Javascript 中不起作用

Question

我正在嘗試在 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';
  } 

這些是我能夠使用的僅有的 2 個拖動事件，因為dragstart效果不適用於從操作系統拖動文件並將它們放入瀏覽器。 任何建議都會在這里，因為我幾乎用盡了我所有的選擇。

Answer 1

來自 caniuse： https ://caniuse.com/#feat=dragndrop

IE11 僅部分支持拖放

dataTransfer.items 僅受 Chrome 支持。

目前沒有瀏覽器支持 dropzone 屬性。

Firefox 支持任何類型的 .setDragImage DOM 元素。 Chrome 必須有一個 HTMLImageElement 或任何類型的 DOM 元素附加到 DOM 並且在 .setDragImage 的瀏覽器視口內。

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

2 部分支持是指不支持.setDragImage

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

您可能需要搜索 polyfill 或回退來直接使用文件輸入而不是 DnD 上傳文件