拖拽选择文件
屏蔽默认事件
刚开始的时候，是在网上找了一个例子，这个例子中提到，需要在document上屏蔽和drag相关的所有事件的默认处理方式，代码如下：
实际上，在我们的文件上传中，接受拖拽的区域一般只有一个小区域，所以我对其做了如下的精简
并且，在enter事件的时候，给目标区域增加了一个hover的样式，让接受区域高亮
默认情况下是酱紫的，（
所以在drop 和leave事件中要去掉这个样式
）
对来源不同的文件进行处理
因为要同时处理input框和拖拽区域，所以我的html结构如下:
为
的drop事件和
的change事件同时绑定
函数并将event对象传入函数中
这里，我在
事件上加入了
修饰符来屏蔽默认事件，如果不屏蔽事件，接受区域
是无法接收到文件，并且文件会触发浏览器的下载（如果不能直接预览的话）或者预览；
ps:隐去了js代码中的业务逻辑只讲述公共部分，
在接受用户选择的文件时，用
作为判断条件，来判断是否有input选择的文件，如果是则取
,如果不是 则取
。
这两个事件对象的属性是浏览器根据不同的情况挂在事件对象上的。
$(document).on({
dragleave:function(e){ //拖离
e.preventDefault();
},
drop:function(e){ //拖后放
e.preventDefault();
},
dragenter:function(e){ //拖进
e.preventDefault();
},
dragover:function(e){ //拖来拖去
e.preventDefault();
}
});$drop.on("dragenter", function (e) {
e.preventDefault();
console.log("enter");
$drop.addClass("hover");});$drop.on("dragleave drop", function (e) {
e.preventDefault();
console.log("leave");
$drop.removeClass("hover");});$drop.on("dragover", function (e) {
e.preventDefault();})
{{msg}}
#dropBoxinputChangedropprevent#dropBox Change:function(ev){
var e = window.event || ev;
var file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
if(!file){
vm.msg = "点击选择，或者拖拽填写好数据的excel文件致此";
vm.isError = true;
return false
}
},e.target.filese.target.files[0]e.dataTransfer.files[0]