文件上傳

By XFE-不懂JS的前端小菜鳥

---

拖拽選擇文件

屏蔽默認事件

剛開始的時候，是在網上找了一個例子，這個例子中提到，須要在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結構以下:

<div class="row" id="dropBox" @drop.prevent="Change($event)">
                <div 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="" />
                </div>
                <br>
                <div class="loading" :style="'width:'+loading+'%'"></div>
            </div>

爲#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]。
這兩個事件對象的屬性是瀏覽器根據不一樣的狀況掛在事件對象上的。

還有bug沒解決暫時收工 …………

未完待在續