检查 HTML5 拖放文件类型

Checking HTML5 drag and drop file type(检查 HTML5 拖放文件类型)
本文介绍了检查 HTML5 拖放文件类型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我想将拖放区的背景颜色更改为绿色或红色,具体取决于包含的拖拽负载是否包含支持的文件类型 (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

这篇关于检查 HTML5 拖放文件类型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

Drag amp; Drop with Protractor by Repeater(拖动amp;通过中继器使用量角器掉落)
Getting the position of the element in a list when it#39;s drag/dropped (ui.sortable)(拖放时获取元素在列表中的位置(ui.sortable))
Detecting HTML5 Drag And Drop support in javascript(在 javascript 中检测 HTML5 拖放支持)
HTML5 drop event doesn#39;t work unless dragover is handled(除非处理了拖动,否则 HTML5 放置事件不起作用)
How to use jQuery#39;s drop event to upload files dragged from the desktop?(如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?)
Drop image into contenteditable in Chrome to the cursor(将图像拖放到 Chrome 中的 contenteditable 到光标处)