如何實現文件拖曳上傳

拖曳選擇檔案

屏蔽預設事件

剛開始的時候，是在網路上找了一個例子，這個例子中提到，需要在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="{&#39;disabled&#39; : resultMsg.length > 0}"                        class="btn btn-info">
                        <i class="fa fa-cloud-upload text"></i>
                        选择文件                    
                     </button>
                    <span :class="{&#39;error-tips&#39;: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="&#39;width:&#39;+loading+&#39;%&#39;"></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]。 這兩個事件物件的屬性是瀏覽器根據不同的情況掛在事件物件上的。

以上是如何實現文件拖曳上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！