{{ fileName }}
將文件拖拽至此，或
JavaScript拖拽上傳功能如何實(shí)現(xiàn)
這篇文章主要介紹JavaScript拖拽上傳功能如何實(shí)現(xiàn)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括龍?zhí)毒W(wǎng)站建設(shè)、龍?zhí)毒W(wǎng)站制作、龍?zhí)毒W(wǎng)頁(yè)制作以及龍?zhí)毒W(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，龍?zhí)毒W(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到龍?zhí)妒》莸牟糠殖鞘校磥?lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
最近，小明遇到這樣一種情況：在網(wǎng)頁(yè)中上傳文件時(shí)偶爾頁(yè)面會(huì)崩潰。小明仔細(xì)測(cè)試了這種情況，發(fā)現(xiàn)之前用的一個(gè)文件上傳組件有一點(diǎn)缺陷，于是，小明決定自己手寫一個(gè)，樣式如下：
.jpg)
.jpg)
圖一是沒有上傳文件時(shí)的樣式，圖二為上傳文件后的樣式。虛線部分為放置區(qū)域，先來(lái)看代碼：
html部分
css部分
* {
font-size: 14px;
}
.drag-area {
height: 200px;
width: 300px;
border: dashed 1px gray;
margin-bottom: 10px;
color: #777;
}
.uploader-tips {
text-align: center;
height: 200px;
line-height: 200px;
}
.file-name {
text-align: center;
height: 200px;
line-height: 200px;
}js部分
new Vue({
el: '#app',
data () {
return {
fileName: '',
batchFile: '',
MAX_FILE_SIZE: 10 * 1000 * 1000
}
},
methods: {
// 點(diǎn)擊上傳
chooseUploadFile (e) {
const file = e.target.files.item(0)
if (!file) return
if (file.size > this.MAX_FILE_SIZE) {
return alert('文件大小不能超過(guò)10M')
}
this.batchFile = file
this.fileName = file.name
// 清空，防止上傳后再上傳沒有反應(yīng)
e.target.value = ''
},
// 拖拽上傳
fileDragover (e) {
e.preventDefault()
},
fileDrop (e) {
e.preventDefault()
const file = e.dataTransfer.files[0] // 獲取到第一個(gè)上傳的文件對(duì)象
if (!file) return
if (file.size > this.MAX_FILE_SIZE) {
return alert('文件大小不能超過(guò)10M')
}
this.batchFile = file
this.fileName = file.name
},
// 提交
uploadOk () {
if (this.batchFile === '') {
return alert('請(qǐng)選擇要上傳的文件')
}
let data = new FormData()
data.append('upfile', this.batchFile)
// ajax
}
}
})核心原理說(shuō)明
dragover和drop事件
第一個(gè)要說(shuō)的就是拖拽中的這兩個(gè)事件，因?yàn)檫@兩個(gè)事件撐起了拖拽上傳的核心功能。
對(duì)于拖拽這個(gè)動(dòng)作而言，有二個(gè)核心概念，一個(gè)是拖拽元素，還一個(gè)是放置目標(biāo)。這里，我只講放置目標(biāo)上的事件，對(duì)于拖拽元素的事件，請(qǐng)自行查閱。
那對(duì)于放置目標(biāo)，它有什么事件呢？如下：
當(dāng)某個(gè)元素被拖動(dòng)到一個(gè)有效的放置目標(biāo)上(如上例中虛線區(qū)域)時(shí)，下列事件會(huì)依次發(fā)生：
(1) dragenter
(2) dragover
(3) dragleave 或 drop
只要有元素被拖動(dòng)到放置目標(biāo)上，就會(huì)觸發(fā) dragenter 事件（類似于 mouseover 事件）。緊隨其后的是 dragover 事件，而且在被拖動(dòng)的元素還在放置目標(biāo)的范圍內(nèi)移動(dòng)時(shí)，就會(huì)持續(xù)觸發(fā)該事件。如果元素被拖出了放置目標(biāo)，dragover 事件不再發(fā)生，但會(huì)觸發(fā) dragleave 事件（類似于 mouseout事件）。如果元素被放到了放置目標(biāo)中，則會(huì)觸發(fā) drop 事件而不是 dragleave 事件。
對(duì)于本例來(lái)說(shuō)，我們只需要關(guān)注dragover和drop事件。但是drop事件卻有點(diǎn)調(diào)皮，你想監(jiān)聽它，還得進(jìn)行一些處理，因?yàn)槟J(rèn)情況下，元素是不允許放置的，在拖動(dòng)元素經(jīng)過(guò)某些無(wú)效放置目標(biāo)時(shí)，可以看到一種特殊的光標(biāo)（圓環(huán)中有一條反斜線），表示不能放置。如下：
如果拖動(dòng)元素經(jīng)過(guò)不允許放置的元素，那無(wú)論用戶如何操作，都不會(huì)發(fā)生 drop 事件。那怎么辦呢？
我們可以重寫 dragover 事件的默認(rèn)行為，如上例代碼中的e.preventDefault()。
細(xì)心的同學(xué)可能要問了，那drop事件中也有e.preventDefault()，去掉行不行呢？大家可以自行試下。
dataTransfer 對(duì)象
可能這個(gè)對(duì)象看著有些陌生，但是它的作用可不小。比如，你拖動(dòng)一個(gè)圖片到目標(biāo)區(qū)域，那目標(biāo)區(qū)域怎么獲取這個(gè)圖片的信息呢？就靠它！它是事件對(duì)象的一個(gè)屬性，用于從被拖動(dòng)元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。在本例中，我們可以通過(guò)它來(lái)獲取拖動(dòng)中的文件信息。
input的change事件
這個(gè)事件其實(shí)有坑的，它有這樣一個(gè)特性，即：上傳同一個(gè)文件，并不會(huì)觸發(fā)change事件，即使該文件內(nèi)容做過(guò)修改。
細(xì)思極恐！比如，用戶要上傳一個(gè)文檔，但是拖拽到虛線區(qū)域后發(fā)現(xiàn)文檔內(nèi)容還需要修改下，他改完后再拖拽該文檔，再提交到服務(wù)器，那么他上傳到服務(wù)器的文檔內(nèi)容卻是未修改之前的！
所以，我們需要代碼e.target.value = ''來(lái)進(jìn)行重置處理，這樣，每次上傳文件都會(huì)觸發(fā)change事件。
以上是JavaScript拖拽上傳功能如何實(shí)現(xiàn)的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁(yè)題目：JavaScript拖拽上傳功能如何實(shí)現(xiàn)
本文來(lái)源：http://m.jiaotiyi.com/article/gghgjo.html