{{ fileName }}
將文件拖拽至此，或
資訊專欄INFORMATION COLUMN
摘要：場景最近，小明遇到這樣一種情況在網(wǎng)頁中上傳文件時偶爾頁面會崩潰。小明仔細(xì)測試了這種情況，發(fā)現(xiàn)之前用的一個文件上傳組件有一點(diǎn)缺陷，于是，小明決定自己手寫一個，樣式如下圖一是沒有上傳文件時的樣式，圖二為上傳文件后的樣式。
場景
最近，小明遇到這樣一種情況：在網(wǎng)頁中上傳文件時偶爾頁面會崩潰。小明仔細(xì)測試了這種情況，發(fā)現(xiàn)之前用的一個文件上傳組件有一點(diǎn)缺陷，于是，小明決定自己手寫一個，樣式如下：
圖一是沒有上傳文件時的樣式，圖二為上傳文件后的樣式。虛線部分為放置區(qū)域，先來看代碼：
html部分css部分{{ fileName }}將文件拖拽至此，或
* {
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("文件大小不能超過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] // 獲取到第一個上傳的文件對象
if (!file) return
if (file.size > this.MAX_FILE_SIZE) {
return alert("文件大小不能超過10M")
}
this.batchFile = file
this.fileName = file.name
},
// 提交
uploadOk () {
if (this.batchFile === "") {
return alert("請選擇要上傳的文件")
}
let data = new FormData()
data.append("upfile", this.batchFile)
// ajax
}
}
})
核心原理說明
dragover和drop事件
第一個要說的就是拖拽中的這兩個事件，因為這兩個事件撐起了拖拽上傳的核心功能。
對于拖拽這個動作而言，有二個核心概念，一個是拖拽元素，還一個是放置目標(biāo)。這里，我只講放置目標(biāo)上的事件，對于拖拽元素的事件，請自行查閱。
那對于放置目標(biāo)，它有什么事件呢？如下：
當(dāng)某個元素被拖動到一個有效的放置目標(biāo)上(如上例中虛線區(qū)域)時，下列事件會依次發(fā)生：
(1) dragenter
(2) dragover
(3) dragleave 或 drop
只要有元素被拖動到放置目標(biāo)上，就會觸發(fā) dragenter 事件（類似于 mouseover 事件）。緊隨其后的是 dragover 事件，而且在被拖動的元素還在放置目標(biāo)的范圍內(nèi)移動時，就會持續(xù)觸發(fā)該事件。如果元素被拖出了放置目標(biāo)，dragover 事件不再發(fā)生，但會觸發(fā) dragleave 事件（類似于 mouseout事件）。如果元素被放到了放置目標(biāo)中，則會觸發(fā) drop 事件而不是 dragleave 事件。
對于本例來說，我們只需要關(guān)注dragover和drop事件。但是drop事件卻有點(diǎn)調(diào)皮，你想監(jiān)聽它，還得進(jìn)行一些處理，因為默認(rèn)情況下，元素是不允許放置的，在拖動元素經(jīng)過某些無效放置目標(biāo)時，可以看到一種特殊的光標(biāo)（圓環(huán)中有一條反斜線），表示不能放置。如下：
如果拖動元素經(jīng)過不允許放置的元素，那無論用戶如何操作，都不會發(fā)生 drop 事件。那怎么辦呢？
我們可以重寫 dragover 事件的默認(rèn)行為，如上例代碼中的e.preventDefault()。
細(xì)心的同學(xué)可能要問了，那drop事件中也有e.preventDefault()，去掉行不行呢？大家可以自行試下。
dataTransfer 對象
可能這個對象看著有些陌生，但是它的作用可不小。比如，你拖動一個圖片到目標(biāo)區(qū)域，那目標(biāo)區(qū)域怎么獲取這個圖片的信息呢？就靠它！它是事件對象的一個屬性，用于從被拖動元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。在本例中，我們可以通過它來獲取拖動中的文件信息。
input的change事件
這個事件其實(shí)有坑的，它有這樣一個特性，即：上傳同一個文件，并不會觸發(fā)change事件，即使該文件內(nèi)容做過修改。
細(xì)思極恐！比如，用戶要上傳一個文檔，但是拖拽到虛線區(qū)域后發(fā)現(xiàn)文檔內(nèi)容還需要修改下，他改完后再拖拽該文檔，再提交到服務(wù)器，那么他上傳到服務(wù)器的文檔內(nèi)容卻是未修改之前的！
所以，我們需要代碼e.target.value = ""來進(jìn)行重置處理，這樣，每次上傳文件都會觸發(fā)change事件。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101843.html
摘要：記錄下，開發(fā)需求是實(shí)現(xiàn)一個類似百度網(wǎng)盤全局拖拽的功能兼容瀏覽器，以上。監(jiān)聽上的事件，顯示拖拽的蒙層監(jiān)聽目標(biāo)節(jié)點(diǎn)上的拖拽事件。 記錄下，開發(fā)需求是實(shí)現(xiàn)一個類似百度網(wǎng)盤全局拖拽的功能,兼容瀏覽器，IE0以上。實(shí)現(xiàn)思路是，采用原聲的拖拽事件。監(jiān)聽window上的dragenter事件，拖拽目標(biāo)節(jié)點(diǎn)是fixed罩住頁面的dropZone節(jié)點(diǎn)。 監(jiān)聽window上的dragenter事件，顯示...
摘要：實(shí)現(xiàn)原理簡單，純技術(shù)處理圖片，幾乎不需要用到相關(guān)知識面向人群急于使用頭像裁剪組件的同學(xué)。裁剪框初始寬高上傳圖片后，裁剪區(qū)將預(yù)設(shè)為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續(xù)優(yōu)化。 項目簡介 本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無需安裝依賴 使用九宮格進(jìn)行裁剪，自由選擇裁剪區(qū)域。 實(shí)時預(yù)覽裁剪后效果。 可以將裁剪好的圖片，...
摘要：常用的設(shè)置如下下的請求風(fēng)格下的請求和不太一樣，在正式的請求發(fā)出之前都會先發(fā)一個類型為的請求作為試探，只有當(dāng)該請求通過以后，正式的請求才能發(fā)向服務(wù)端。所以服務(wù)端路由我們還需要處理這樣一個請求注意該請求同樣需要設(shè)置跨域。 寫在前面 紅旗不倒，誓把JavaScript進(jìn)行到底！今天介紹我的開源項目 Royal 里的圖片上傳組件的前后端實(shí)現(xiàn)原理（React + Node），花了一些時間，希望對...
摘要：更新歷史修復(fù)了無法導(dǎo)出中文文件的，增加了拖拽導(dǎo)入文件的功能。把編碼對象作為參數(shù)傳入，就可以生成一個可供下載的鏈接，下載的內(nèi)容是完美的中文字符其他種類字符同樣支持，代碼如下保存為格式以上就是兩個關(guān)鍵新功能的實(shí)現(xiàn)原理。 Markcook 1.2 showImg(https://imgly.net/img/AhB.jpg); 項目地址：https://github.com/jrainlau...
閱讀 797·2021-11-11 16:54
閱讀 1533·2021-08-24 10:01
閱讀 1922·2019-08-30 15:54
閱讀 3303·2019-08-29 14:02
閱讀 3138·2019-08-28 18:22
閱讀 2253·2019-08-28 18:09
閱讀 3715·2019-08-26 10:26
閱讀 2674·2019-08-23 18:23
