剛開始的時候，是在網路上找了一個例子，這個例子中提到，需要在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事件中要去掉這個樣式）
<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
}
},e.target.files作為判斷條件，來判斷是否有input選擇的文件，如果是則取e.target.files[0] ,如果不是則取e.dataTransfer.files[0]。 這兩個事件物件的屬性是瀏覽器根據不同的情況掛在事件物件上的。
以上是如何實現文件拖曳上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！
