日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

功能問題:如何實現文件的拖拽上傳?

來源: 責編: 時間:2024-03-27 09:25:34 277觀看
導讀1. 需求分析文件上傳,可以說是我們在項目中最常用的功能之一。文件上傳一般有兩種形式:點擊上傳和拖拽上傳。而上傳的內容,又大體包括:文件和文件夾。在項目中,我們一般都會直接選擇使用UI庫提供的上傳組件,簡單配置一下必

Usp28資訊網——每日最新資訊28at.com

1. 需求分析

文件上傳,可以說是我們在項目中最常用的功能之一。Usp28資訊網——每日最新資訊28at.com

文件上傳一般有兩種形式:點擊上傳和拖拽上傳。而上傳的內容,又大體包括:文件和文件夾。Usp28資訊網——每日最新資訊28at.com

在項目中,我們一般都會直接選擇使用UI庫提供的上傳組件,簡單配置一下必要的屬性,就實現了文件上傳功能,至于組件底層實現的原理,是絲毫不知。Usp28資訊網——每日最新資訊28at.com

所以今天,針對文件和文件夾的拖拽上傳功能,我整理了一下具體的實現,很簡單一起瞧瞧。Usp28資訊網——每日最新資訊28at.com

Usp28資訊網——每日最新資訊28at.com

2. 問題實現

先普及一下元素拖拽的幾個API知識點,再放上文件拖拽上傳的實現代碼,并做簡單的描述,最后做小結。Usp28資訊網——每日最新資訊28at.com

(1)拖拽的6個API

元素拖拽的6個API分別是:dragenter、dragover、drop 以及dragstart、drag、dragend。Usp28資訊網——每日最新資訊28at.com

ondragstart 事件:該事件在拖動操作開始時觸發,即拖動操作的起點。通常在該事件的處理函數中設置拖動的數據和效果。Usp28資訊網——每日最新資訊28at.com

drag 事件:該事件在元素正在被拖動時持續觸發,即在拖動過程中。可以在該事件的處理函數中執行一些實時的操作,例如更新元素的位置或顯示一些效果。Usp28資訊網——每日最新資訊28at.com

dragend 事件:該事件在拖動操作結束時觸發,即拖動操作的終點。通常在該事件的處理函數中執行一些清理操作或其他邏輯。Usp28資訊網——每日最新資訊28at.com

這三個事件通常用于控制拖動元素起始、過程和結束階段的行為。Usp28資訊網——每日最新資訊28at.com

Usp28資訊網——每日最新資訊28at.com

ondragenter 事件:該事件在拖動元素進入目標元素的范圍時觸發。可以在該事件的處理函數中執行一些顯示效果或狀態改變等操作。Usp28資訊網——每日最新資訊28at.com

ondragover 事件:該事件在拖動元素在目標元素上移動時持續觸發,即在拖動元素在目標元素上懸停期間。通常需要阻止默認的拖放行為,以便允許在目標元素上釋放。Usp28資訊網——每日最新資訊28at.com

ondrop 事件:該事件在拖動元素在目標元素上釋放時觸發。可以在該事件的處理函數中獲取拖動的數據并執行相應的操作。Usp28資訊網——每日最新資訊28at.com

這三個事件通常用于控制目標元素在接受拖動元素時的行為。Usp28資訊網——每日最新資訊28at.com

(2)文件拖拽上傳實現

元素拖拽的6個API,這里我們只需要使用dragover、drop這兩個,就能實現文件拖拽上傳。Usp28資訊網——每日最新資訊28at.com

下面簡單描述一下實現過程,具體細節大家看代碼就好,原理很簡單。Usp28資訊網——每日最新資訊28at.com

先獲取頁面中的 DropFrame 元素,再為其添加兩個事件監聽器。Usp28資訊網——每日最新資訊28at.com

dragover 事件監聽器:當有元素拖拽到 DropFrame 區域時觸發,用于指定拖放操作的效果。這里必須阻止事件默認行為,否則文件是拖不上去的,會被瀏覽器所阻止。Usp28資訊網——每日最新資訊28at.com

drop 事件監聽器:當在 DropFrame 區域釋放拖拽的元素時觸發,用于處理拖放完成后的操作。內部通過遍歷e.dataTransfer.items ,判斷文件或文件夾,文件就直接獲取File對象,文件夾則遞歸獲取內部文件的File對象,最后依次單獨上傳服務器。Usp28資訊網——每日最新資訊28at.com

完整實現代碼如下,復制即可使用。Usp28資訊網——每日最新資訊28at.com

<!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><!-- 拖拽區域 --><div id="DropFrame">文件拖到這里上傳</div></body><script>let dropFrame = document.getElementById('DropFrame');// 拖動元素在目標元素上懸停期間dropFrame.addEventListener('dragover', (e) => {// 阻止默認事件和冒泡 必須寫e.stopPropagation();e.preventDefault();});// 拖動元素在目標元素上釋放時觸發dropFrame.addEventListener('drop', (e) => {// 阻止默認事件和冒泡 必須寫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');// 上傳文件到服務器// 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');// 上傳文件到服務器// 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個API,以及文件拖拽上傳的實現過程。Usp28資訊網——每日最新資訊28at.com

元素拖拽的6個API,這里我們只需要使用dragover、drop這兩個,就能實現文件拖拽上傳。Usp28資訊網——每日最新資訊28at.com

值得注意的是,必須阻止事件默認行為,否則文件是拖不上去的,會被瀏覽器所阻止。Usp28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-79604-0.html功能問題:如何實現文件的拖拽上傳?

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 2024年,你需要掌握的 JavaScript 面試問題和答案

下一篇: React為什么要廢棄ComponentWillMount、ReceiveProps和Update這三個生命周期

標簽:
  • 熱門焦點
  • 一加Ace2 Pro真機揭曉 鈦空灰配色質感拉滿

    終于,在經過了幾波預熱之后,一加Ace2 Pro的外觀真機圖在網上出現了。還是博主數碼閑聊站曝光的,這次的外觀設計還是延續了一加11的方案,只是細節上有了調整,例如新加入了鈦空灰
  • 掘力計劃第 20 期:Flutter 混合開發的混亂之治

    在掘力計劃系列活動第20場,《Flutter 開發實戰詳解》作者,掘金優秀作者,Github GSY 系列目負責人戀貓的小郭分享了Flutter 混合開發的混亂之治。Flutter 基于自研的 Skia 引擎
  • 三言兩語說透設計模式的藝術-單例模式

    寫在前面單例模式是一種常用的軟件設計模式,它所創建的對象只有一個實例,且該實例易于被外界訪問。單例對象由于只有一個實例,所以它可以方便地被系統中的其他對象共享,從而減少
  • 猿輔導與新東方的兩種“歸途”

    作者|卓心月 出品|零態LT(ID:LingTai_LT)如何成為一家偉大企業?答案一定是對&ldquo;勢&rdquo;的把握,這其中最關鍵的當屬對企業戰略的制定,且能夠站在未來看現在,即使這其中的
  • 阿里大調整

    來源:產品劉有媒體報道稱,近期淘寶天貓集團啟動了近年來最大的人力制度改革,涉及員工績效、層級體系等多個核心事項,目前已形成一個初步的&ldquo;征求意見版&rdquo;:1、取消P序列
  • 微博大門常打開,迎接海外畫師漂洋東渡

    作者:互聯網那些事&ldquo;起猛了,我能看得懂日語了&rdquo;。&ldquo;為什么日本人說話我能聽懂?&rdquo;&ldquo;中文不像中文,日語不像日語,但是我竟然看懂了&rdquo;&hellip;&hell
  • 攜眾多高端產品亮相ChinaJoy,小米帶來一場科技與人文的視聽盛宴

    7月28日,全球數字娛樂領域最具知名度與影響力的年度盛會中國國際數碼互動娛樂展覽會(簡稱ChinaJoy)在上海新國際博覽中心盛大開幕。作為全球領先的科
  • 小米MIX Fold 3配置細節曝光:搭載領先版驍龍8 Gen2+罕見5倍長焦

    這段時間以來,包括三星、一加、榮耀等等有不少品牌旗下的最新折疊屏旗艦都得到了不少爆料,而小米新一代折疊屏旗艦——小米MIX Fold 3此前也屢屢被傳
  • 回歸OPPO兩年,一加贏了銷量,輸了品牌

    成為OPPO旗下主打性能的先鋒品牌后,一加屢創佳績。今年618期間,一加手機全渠道銷量同比增長362%,憑借一加 11、一加 Ace 2、一加 Ace 2V三款爆品,一加
Top 主站蜘蛛池模板: 阜城县| 平利县| 泸州市| 芜湖市| 丽水市| 义马市| 贺州市| 荥经县| 平陆县| 华池县| 安仁县| 体育| 西昌市| 木兰县| 邓州市| 隆林| 望江县| 白玉县| 上思县| 勐海县| 泽州县| 哈尔滨市| 宜州市| 柘城县| 贺州市| 镇江市| 金坛市| 霍州市| 江华| 伊宁市| 梓潼县| 营山县| 大城县| 昌吉市| 双牌县| 汤原县| 南华县| 肇州县| 来宾市| 昌吉市| 黄骅市|