如何实现文件拖拽上传

来源：动视网责编：小采时间：2020-11-27 20:11:56

如何实现文件拖拽上传

如何实现文件拖拽上传:拖拽选择文件屏蔽默认事件刚开始的时候，是在网上找了一个例子，这个例子中提到，需要在document上屏蔽和drag相关的所有事件的默认处理方式，代码如下：$(document).on({ dragleave:function(e){ //拖离 e.preventDefault(); }, dr

推荐度：

点击下载本文 文档为doc格式

导读如何实现文件拖拽上传:拖拽选择文件屏蔽默认事件刚开始的时候，是在网上找了一个例子，这个例子中提到，需要在document上屏蔽和drag相关的所有事件的默认处理方式，代码如下：$(document).on({ dragleave:function(e){ //拖离 e.preventDefault(); }, dr

拖拽选择文件

屏蔽默认事件

刚开始的时候，是在网上找了一个例子，这个例子中提到，需要在document上屏蔽和drag相关的所有事件的默认处理方式，代码如下：

$(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]。
这两个事件对象的属性是浏览器根据不同的情况挂在事件对象上的。