如何實現(xiàn)文件拖拽上傳

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:11:56

如何實現(xiàn)文件拖拽上傳

如何實現(xiàn)文件拖拽上傳:拖拽選擇文件屏蔽默認事件剛開始的時候，是在網(wǎng)上找了一個例子，這個例子中提到，需要在document上屏蔽和drag相關的所有事件的默認處理方式，代碼如下：$(document).on({ dragleave:function(e){ //拖離 e.preventDefault(); }, dr

推薦度：

點擊下載本文 文檔為doc格式

導讀如何實現(xiàn)文件拖拽上傳:拖拽選擇文件屏蔽默認事件剛開始的時候，是在網(wǎng)上找了一個例子，這個例子中提到，需要在document上屏蔽和drag相關的所有事件的默認處理方式，代碼如下：$(document).on({ dragleave:function(e){ //拖離 e.preventDefault(); }, dr

拖拽選擇文件

屏蔽默認事件

剛開始的時候，是在網(wǎng)上找了一個例子，這個例子中提到，需要在document上屏蔽和drag相關的所有事件的默認處理方式，代碼如下：

$(document).on({ 
 dragleave:function(e){ //拖離 
 e.preventDefault(); 
 }, 
 drop:function(e){ //拖后放 
 e.preventDefault(); 
 }, 
 dragenter:function(e){ //拖進 
 e.preventDefault(); 
 }, 
 dragover:function(e){ //拖來拖去 
 e.preventDefault(); 
 } 
 });

實際上，在我們的文件上傳中，接受拖拽的區(qū)域一般只有一個小區(qū)域，所以我對其做了如下的精簡

$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事件的時候，給目標區(qū)域增加了一個hover的樣式，讓接受區(qū)域高亮

默認情況下是醬紫的，（所以在drop 和leave事件中要去掉這個樣式）

對來源不同的文件進行處理

因為要同時處理input框和拖拽區(qū)域，所以我的html結(jié)構(gòu)如下:

 <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函數(shù)并將event對象傳入函數(shù)中
這里，我在drop事件上加入了prevent修飾符來屏蔽默認事件，如果不屏蔽事件，接受區(qū)域#dropBox 是無法接收到文件，并且文件會觸發(fā)瀏覽器的下載（如果不能直接預覽的話）或者預覽；

 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 = "點擊選擇，或者拖拽填寫好數(shù)據(jù)的excel文件致此";
 vm.isError = true;
 return false
 } 
 },

ps:隱去了js代碼中的業(yè)務邏輯只講述公共部分，

在接受用戶選擇的文件時，用e.target.files作為判斷條件，來判斷是否有input選擇的文件，如果是則取 e.target.files[0] ,如果不是則取 e.dataTransfer.files[0]。
這兩個事件對象的屬性是瀏覽器根據(jù)不同的情況掛在事件對象上的。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com