Javascript 如果文件类型无效，ondrop后中止/取消数据传输

如果选择了无效的文件类型/将其放置在放置区域，是否有办法在Javascript中的onDrop事件之后中止/取消文件传输

例如，如果只允许.jpg、.png文件格式，但用户将一个扩展名为*.gif的文件拖放到拖放区域，我想取消自动向服务器发送/上载数据，并通知选择了无效的文件格式

简单例子

div = document.getElementById('div');
div.ondragover = function(event){

   div.ondrop = function(event){

if(event.dataTransfer.files[0].type == 'gif'){
    abort/cencel upload here
    }
    } 


  return false;//cancelling ondragover to allow ondrop event 

    }

---

因此，如果您使用html+js本机事件来捕获拖放

以下是获取信息的方法：

event.dataTransfer.files[0].name // to get the file name
event.dataTransfer.files[0].size // to get the file size
event.dataTransfer.files[0].type // to get the file type

过滤器类型：

首先，您需要取消默认行为以防止上载

event.preventDefault();

供IE使用

然后你可以分析你的数据

if(event.dataTransfer.files[0].type == 'gif')
{
    //show message
}

然后，您可以使用例如ajax继续上传

var xhr = new XMLHttpRequest();
xhr.open("POST", "receivefile.php", true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);

---

请输入一些代码。显示您如何检测滴落。@Mohammed Joraid，更新了代码。是的，我使用的是纯Javascript。event.preventDefault适用于所有浏览器，还是仅适用于IE？我仅对IE使用event.preventDefault，对其他浏览器返回false。我正准备写这封信，看到了你最新的答案。试过了，成功了。非常感谢。实际上，在问这个问题之前，我尝试了您提供的实现，但是我将event.preventDefault/returnfalse放在了错误的位置。这就是为什么一开始它不起作用。在阅读了您的答案后，更改了位置，结果成功了：

var xhr = new XMLHttpRequest();
xhr.open("POST", "receivefile.php", true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);