6月iOS設(shè)備好評榜：第一蟬聯(lián)榜首近一年
作為安兔兔各種榜單里變化最小的那個(gè)，2023年6月的iOS好評榜和上個(gè)月相比沒有任何排名上的變化，僅僅是部分設(shè)備好評率的下降，長年累月的用戶評價(jià)和逐漸退出市場的老款機(jī)器讓這
文件上傳，可以說是我們在項(xiàng)目中最常用的功能之一。
文件上傳一般有兩種形式：點(diǎn)擊上傳和拖拽上傳。而上傳的內(nèi)容，又大體包括：文件和文件夾。
在項(xiàng)目中，我們一般都會(huì)直接選擇使用UI庫提供的上傳組件，簡單配置一下必要的屬性，就實(shí)現(xiàn)了文件上傳功能，至于組件底層實(shí)現(xiàn)的原理，是絲毫不知。
所以今天，針對文件和文件夾的拖拽上傳功能，我整理了一下具體的實(shí)現(xiàn)，很簡單一起瞧瞧。
先普及一下元素拖拽的幾個(gè)API知識(shí)點(diǎn)，再放上文件拖拽上傳的實(shí)現(xiàn)代碼，并做簡單的描述，最后做小結(jié)。
元素拖拽的6個(gè)API分別是：dragenter、dragover、drop 以及dragstart、drag、dragend。
ondragstart 事件：該事件在拖動(dòng)操作開始時(shí)觸發(fā)，即拖動(dòng)操作的起點(diǎn)。通常在該事件的處理函數(shù)中設(shè)置拖動(dòng)的數(shù)據(jù)和效果。
drag 事件：該事件在元素正在被拖動(dòng)時(shí)持續(xù)觸發(fā)，即在拖動(dòng)過程中。可以在該事件的處理函數(shù)中執(zhí)行一些實(shí)時(shí)的操作，例如更新元素的位置或顯示一些效果。
dragend 事件：該事件在拖動(dòng)操作結(jié)束時(shí)觸發(fā)，即拖動(dòng)操作的終點(diǎn)。通常在該事件的處理函數(shù)中執(zhí)行一些清理操作或其他邏輯。
這三個(gè)事件通常用于控制拖動(dòng)元素起始、過程和結(jié)束階段的行為。
ondragenter 事件：該事件在拖動(dòng)元素進(jìn)入目標(biāo)元素的范圍時(shí)觸發(fā)。可以在該事件的處理函數(shù)中執(zhí)行一些顯示效果或狀態(tài)改變等操作。
ondragover 事件：該事件在拖動(dòng)元素在目標(biāo)元素上移動(dòng)時(shí)持續(xù)觸發(fā)，即在拖動(dòng)元素在目標(biāo)元素上懸停期間。通常需要阻止默認(rèn)的拖放行為，以便允許在目標(biāo)元素上釋放。
ondrop 事件：該事件在拖動(dòng)元素在目標(biāo)元素上釋放時(shí)觸發(fā)。可以在該事件的處理函數(shù)中獲取拖動(dòng)的數(shù)據(jù)并執(zhí)行相應(yīng)的操作。
這三個(gè)事件通常用于控制目標(biāo)元素在接受拖動(dòng)元素時(shí)的行為。
元素拖拽的6個(gè)API，這里我們只需要使用dragover、drop這兩個(gè)，就能實(shí)現(xiàn)文件拖拽上傳。
下面簡單描述一下實(shí)現(xiàn)過程，具體細(xì)節(jié)大家看代碼就好，原理很簡單。
先獲取頁面中的 DropFrame 元素，再為其添加兩個(gè)事件監(jiān)聽器。
dragover 事件監(jiān)聽器：當(dāng)有元素拖拽到 DropFrame 區(qū)域時(shí)觸發(fā)，用于指定拖放操作的效果。這里必須阻止事件默認(rèn)行為，否則文件是拖不上去的，會(huì)被瀏覽器所阻止。
drop 事件監(jiān)聽器：當(dāng)在 DropFrame 區(qū)域釋放拖拽的元素時(shí)觸發(fā)，用于處理拖放完成后的操作。內(nèi)部通過遍歷e.dataTransfer.items ，判斷文件或文件夾，文件就直接獲取File對象，文件夾則遞歸獲取內(nèi)部文件的File對象，最后依次單獨(dú)上傳服務(wù)器。
完整實(shí)現(xiàn)代碼如下，復(fù)制即可使用。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style>#DropFrame {width: 360px;height: 120px;background-color: #b8deff;border: solid 1px #3470ff;}</style></head><body><!-- 拖拽區(qū)域 --><div id="DropFrame">文件拖到這里上傳</div></body><script>let dropFrame = document.getElementById('DropFrame');// 拖動(dòng)元素在目標(biāo)元素上懸停期間dropFrame.addEventListener('dragover', (e) => {// 阻止默認(rèn)事件和冒泡 必須寫e.stopPropagation();e.preventDefault();});// 拖動(dòng)元素在目標(biāo)元素上釋放時(shí)觸發(fā)dropFrame.addEventListener('drop', (e) => {// 阻止默認(rèn)事件和冒泡 必須寫e.stopPropagation();e.preventDefault();// 文件上傳處理邏輯let items = e.dataTransfer.items;for (const item of items) {// 提取Entry對象const entry = item.webkitGetAsEntry();if (entry.isFile) {// 處理文件，拿到File文件entry.file((file) => {console.log(file, 'file');// 上傳文件到服務(wù)器// var formData = new FormData();// formData.append('file', file);// axios.post('/upload', formData, {})})} else {// 處理文件夾，拿到FileEntry對象const reader = entry.createReader()reader.readEntries((entries) => {reHandleFile(entries)})}}});// 如果文件夾是多級，則遞歸讀取const reHandleFile = (entries) => {for (const entry of entries) {if (entry.isFile) {// 處理文件，拿到File文件entry.file((file) => {console.log(file, 'file');// 上傳文件到服務(wù)器// var formData = new FormData();// formData.append('file', file);// axios.post('/upload', formData, {})})} else {// 處理文件夾，拿到FileEntry對象const reader = entry.createReader()reader.readEntries((entries) => {// 遞歸reHandleFile(entries)})}}}</script></html>本文簡單介紹了，元素拖拽的6個(gè)API，以及文件拖拽上傳的實(shí)現(xiàn)過程。
元素拖拽的6個(gè)API，這里我們只需要使用dragover、drop這兩個(gè)，就能實(shí)現(xiàn)文件拖拽上傳。
值得注意的是，必須阻止事件默認(rèn)行為，否則文件是拖不上去的，會(huì)被瀏覽器所阻止。
本文鏈接：http://m.www897cc.com/showinfo-26-79604-0.html功能問題：如何實(shí)現(xiàn)文件的拖拽上傳？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 2024年，你需要掌握的 JavaScript 面試問題和答案
下一篇： React為什么要廢棄ComponentWillMount、ReceiveProps和Update這三個(gè)生命周期
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)