我可以使用 DropzoneJs 在拖动事件中获取文件名以及文件是否是有效类型（给定 mime）？答案

【问题标题】：Can I get the File name and if the file is a valid type (given mime) in the dragover event using DropzoneJs?我可以使用 DropzoneJs 在拖动事件中获取文件名以及文件是否是有效类型（给定 mime）？
【发布时间】：2021-08-03 19:30:35
【问题描述】：

我有以下...

this.dropzone = new Dropzone(
  this.$refs.dropzoneElement,
  {
    url: this.url,
    acceptedFiles: "application/pdf",
  },
);
this.dropzone.on("dragover", ()=>{
  this.isHovered = true;
});
this.dropzone.on("success", (file)=>{
  this.$emit("success", file);
});
this.dropzone.on("addedfile", (file)=>{
  this.$emit("started", file);
  this.isHovered = false;
});

悬停只会改变边框颜色。如果不允许文件类型，我想将边框颜色更改为红色。我在输入事件中找不到任何可以为我提供此信息的内容。有没有办法做到这一点？

【问题讨论】：

标签： javascript dropzone.js

【解决方案1】：

根据Dropzone docs dragover 应该从浏览器获取一个事件，我想它应该是DragEvent 类型。

如果是这样，事件应该具有 DataTransfer 类型的 dataTransfer 属性以及文件的详细信息。

例如event.dataTransfer.items[0].type 给出第一个文件的内容类型。

你可以试试：

this.dropzone.on("dragover", (event)=>{
  console.log(event.dataTransfer.items[0].type);
  this.isHovered = true;
});

这是使用原生浏览器 API 的小原型，dragover 处理程序的 Dropzone 代码应该类似：

document.getElementById('el').addEventListener('dragover', e => {
    if (e.dataTransfer.items.length) {
        if (e.dataTransfer.items[0].type === 'image/png') {
            // accepted file type
            document.getElementById('el').style.borderColor = 'green';
        } else {
            // unaccepted file type
            document.getElementById('el').style.borderColor = 'red';
        }
    }

    // extra debug information: display all file types
    const types = [...e.dataTransfer.items].map(item => item.type);
    document.getElementById('debug').innerHTML = `File types: ${types.join(', ')}`;
})

<div id="el" style="width: 200px; height: 200px; background: grey; border: 5px solid grey;">
    Drag files here<br>
    <div id="debug"></div>
</div>

【讨论】：