检查 HTML5 拖放文件类型

2022-01-11 00:00:00 drag-and-drop javascript html

我想将拖放区的背景颜色更改为绿色或红色，具体取决于包含的拖拽负载是否包含支持的文件类型 (JPEG).

I'd like to change drop zone background color to green or red depending on whether the contained drag over payload contains supported file types (JPEG).

  • Gecko 和 Webkit 是否支持确定拖放文件的文件类型?

  • Do Gecko and Webkit support determining the file type of drag and drop files?

如何在这两种浏览器中提取文件类型?

How one can extract the file type in these two browsers?

我找到了 event.dataTransfer.types API，但对于 Firefox，它似乎填充了 application/x-moz-file，因此我认为我做错了.

I have found event.dataTransfer.types API, but for Firefox it seems to be populated with application/x-moz-file and thus I think I am doing something wrong.

推荐答案

您可以使用文件对象在 Gecko 和 webkit 支持的浏览器中获取文件类型.

You can get the file types in Gecko and webkit supported browsers using file object.

var files =e.dataTransfer.files||e.target.files; // File list

文件对象返回名称、类型和大小.您也可以获取上次修改日期.

The file object returns Name,Type and size. you can get last modified date too.

var mimeType= files[0].type; //mime type of file list first entry

相关文章