javascript - DataTransferItem 的 getAsFile 方法为文件返回 null

Question

我正在实现一个简单的拖放文件输入。当文件(图像)“悬停”在放置区域上时，我想预览它们。但是，getAsFile 方法不断为文件返回 null。这是我的代码:

dropzone.addEventListener("dragenter", event => {
    event.preventDefault();

    // make sure these are actually images

    if(!isImages(event)){
      return;
    }

    // preparing the preview area

    let target = dropzone_overlay_images;
    target.innerHTML = '';

    for(let i = 0; i < event.dataTransfer.items.length; i++){

      // assign current item to a variable to make working with it easier

      let item = event.dataTransfer.items[i];
      let img = document.createElement('img');

      // for debug: logging the current item

      console.log(item);

      // get it as file

      let file = item.getAsFile();

      // and log the file

      console.log(file);
    }
    dropzone_overlay.classList.toggle('show');
});

当我将一个 .png 鼠标悬停在它上面时它会记录什么:

main.js:52 DataTransferItem {kind: "file", type: "image/png"}
main.js:60 null

我做错了什么还是这是一个错误？在 Chrome 55 上测试。

Answer 1

我找到了答案。

dragenter 事件无权访问实际文件。它可以检测到正在拖动哪些文件，但无法访问它们的内容。这就是为什么即使填充了 DataTransfer.items 对象，也没有填充 DataTransfer.files 对象，并且不能使用 getAsItem 方法在 DataTransfer.items 项上。

因此我想做的事情(预览拖拽的文件)根本不可能。