HTML5 中的拖放如何判断文件类型?

18 min read

在HTML5中,通过拖放事件来判断文件类型。可以使用event.dataTransfer.types属性来获取拖放的文件类型。

例如,可以通过以下代码来判断拖放的文件是否为图片类型:

function handleDrop(event) {
  event.preventDefault();

  if (event.dataTransfer.types.includes('Files')) {
    const fileList = event.dataTransfer.files;
    
    for (let i = 0; i < fileList.length; i++) {
      const file = fileList[i];
      
      if (file.type.startsWith('image/')) {
        // 处理图片文件
        console.log('这是一个图片文件');
      } else {
        // 处理其他文件类型
        console.log('这不是一个图片文件');
      }
    }
  }
}

在上述代码中,首先通过event.dataTransfer.types属性检查是否拖放了文件。然后通过file.type属性来获取具体文件的MIME类型,通过判断MIME类型是否以image/开头来确定是否为图片类型的文件。