資訊專欄INFORMATION COLUMN
摘要：準備工作首先來一個可編輯的和一些簡單的樣式來封裝兩個方法獲取到操作的文件文件轉為拋出開始拖拽文件要使用到的三個相關事件，分別是，，當元素或者選擇的文本被拖拽到一個有效的放置目標上時，觸發事件。
準備工作 首先來一個可編輯的div和一些簡單的樣式
來封裝兩個方法
function init({el, callback}){ // 獲取到操作的文件
}
function fileToBase64(file, callback){ // 文件轉為base64拋出
}
window.init = init;
開始
拖拽文件
要使用到的三個相關事件， 分別是： dragover， drop， dragleave
當元素或者選擇的文本被拖拽到一個有效的放置目標上時，觸發 dragover 事件。
當一個元素或是選中的文字被拖拽釋放到一個有效的釋放目標位置時，觸發drop事件
被拖動的元素或文本選區移出有效釋放目標區 drop 元素在有效釋放目標區上釋放, 觸發dragleave事件
我們可以在dragover和dragleave來處理拖動當當前位置和拖動完成后或離開的樣式。在drop事件回調來處理要上傳的文件
function init({el, callback}){
const upBox = document.querySelector(el);
if(!upBox){return};
// 拖拽
upBox.addEventListener("dragover", dragoverFile)
upBox.addEventListener("drop", dropFile)
upBox.addEventListener("dragleave", dragleaveFile)
function dragoverFile(e) {
e.preventDefault();
}
function dragleaveFile(e) {
}
function dropFile(e) {
e.preventDefault();
let fileList = e.dataTransfer.files;
let file = fileList[0];
// 在這里就可以拿到拖拽的文件了，傳到下一個函數進行處理
fileToBase64(file, callback)
}
}
粘貼
粘貼的話用到的事件就是 paste 了
function init({el, callback}){
const upBox = document.querySelector(el);
if(!upBox){return};
// 拖拽
upBox.addEventListener("dragover", dragoverFile)
upBox.addEventListener("drop", dropFile)
upBox.addEventListener("dragleave", dragleaveFile)
function dragoverFile(e) {
e.preventDefault();
}
function dragleaveFile(e) {
}
function dropFile(e) {
e.preventDefault();
let fileList = e.dataTransfer.files;
let file = fileList[0];
// 在這里就可以拿到拖拽的文件了，傳到下一個函數進行處理
fileToBase64(file, callback)
}
// 粘貼
upBox.addEventListener("paste", pasteFile)
function pasteFile(e) {
e.preventDefault();
const items = e.clipboardData.items;
for( let i=0; i
這里并不能粘貼文件
最后把文件轉成base64
function fileToBase64(file, callback){
// 實例化一個FileReader對象， 當讀取完成文件時，把base64拋出
const reader = new FileReader();
reader.onload = function(e){
callback(e.target.result)
}
reader.readAsDataURL(file);
}
最后
寫的比較簡單，只是列出了大概思路，實際業務呢，還是要擴展好多的。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97532.html
摘要：使用場景圖片的拖拽指定區域進行上傳圖片粘貼進行上傳功能核心參考案例代碼定義模塊截圖粘貼如果是圖片讀取完成后，上傳上傳圖片返回一個數據拖拽上傳回調文件返回一個數據解析粘貼過來的內容，看是否有不是本站的圖片解析出來上傳到本站使用方法粘貼上傳圖 使用場景 圖片的拖拽指定區域進行上傳 圖片粘貼進行上傳功能 核心api參考 File clipboardData 案例代碼 Seajs 定義To...
前言：前段時間負責公司的運營管理后臺項目，通過運營后臺的PC端拖拽配置布局，達到App首頁模板的動態UI界面配置，生成頁面。趁著周末，整理一下當時所了解到的拖拽。文章會根據大家的反饋或者自己學習經驗的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發，歡迎點贊關注或者收藏一波[鞠躬]。 之前在掘金一篇文章里看到這段話: UI 開發的三種模式 1.手寫標簽和樣式代碼，生成頁面 2.可視化拖拽 ...
摘要：記錄下，開發需求是實現一個類似百度網盤全局拖拽的功能兼容瀏覽器，以上。監聽上的事件，顯示拖拽的蒙層監聽目標節點上的拖拽事件。 記錄下，開發需求是實現一個類似百度網盤全局拖拽的功能,兼容瀏覽器，IE0以上。實現思路是，采用原聲的拖拽事件。監聽window上的dragenter事件，拖拽目標節點是fixed罩住頁面的dropZone節點。 監聽window上的dragenter事件，顯示...
摘要：最近在實現一個功能，需求如下前提當前頁面無彈窗頁面任意位置執行粘貼讀取剪切板中的截屏數據上傳截圖首先還是從網上找相關的例子。找到了上的專欄文章獲取剪切板內容，控制圖片粘貼。 最近在實現一個功能，需求如下： 前提：當前頁面無彈窗 頁面任意位置執行粘貼 讀取剪切板中的截屏數據 上傳截圖 首先還是從網上找相關的例子。 找到了SF上的專欄文章《js獲取剪切板內容，js控制圖片粘貼》。 于是...
閱讀 544·2023-04-26 01:39
閱讀 4530·2021-11-16 11:45
閱讀 2624·2021-09-27 13:37
閱讀 900·2021-09-01 10:50
閱讀 3615·2021-08-16 10:50
閱讀 2232·2019-08-30 15:55
閱讀 2997·2019-08-30 15:55
閱讀 2267·2019-08-30 14:07
