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

Aaand我找到了答案.

该dragenter事件无权访问实际文件.它可以检测正在拖动的文件,但无法访问其内容.这就是为什么即使DataTransfer.items填充对象,DataTransfer.files对象也不是,并且该getAsItem方法不能用于DataTransfer.items项目.

因此,根本无法实现我想要做的事情(预览拖动的文件).