$(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();})
并且，在enter事件的时候，给目标区域增加了一个hover的样式，让接受区域高亮
默认情况下是酱紫的，（所以在drop 和leave事件中要去掉这个样式）
对来源不同的文件进行处理因为要同时处理input框和拖拽区域，所以我的html结构如下:
<p class="row" id="dropbox" @drop.prevent="change($event)"> <p class="import-data"> <button :class="{'disabled' : resultmsg.length > 0}" class="btn btn-info"> <i class="fa fa-cloud-upload text"></i> 选择文件 </button> <span :class="{'error-tips':iserror}">{{msg}}</span> <input type="file" v-show="resultmsg.length == 0" @change="change($event)" name="importexcel" class="importexcel" value="" /> </p> <br> <p class="loading" :style="'width:'+loading+'%'"></p> </p>
为#dropbox 的drop事件和input的change事件同时绑定change函数并将event对象传入函数中
这里，我在drop事件上加入了prevent修饰符来屏蔽默认事件，如果不屏蔽事件，接受区域#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 } },
ps:隐去了js代码中的业务逻辑只讲述公共部分，
在接受用户选择的文件时，用e.target.files作为判断条件，来判断是否有input选择的文件，如果是则取 e.target.files[0] ,如果不是 则取 e.datatransfer.files[0]。
这两个事件对象的属性是浏览器根据不同的情况挂在事件对象上的。
以上就是如何实现文件拖拽上传 的详细内容。