快捷導(dǎo)航

使用原生js實(shí)現(xiàn)拖拽和粘貼上傳圖片功能

更新時(shí)間：2024年04月30日 08:31:08 作者：mortimer

這篇文章主要介紹了使用原生js實(shí)現(xiàn)拖拽和粘貼上傳圖片功能,Vue/Rect?生態(tài)用多了都快忘記原生js怎么寫(xiě)了,今天需要直接在服務(wù)器裸寫(xiě)個(gè)頁(yè)面,實(shí)現(xiàn)?textarea?文本框里接收拖拽多個(gè)圖片,需要的朋友可以參考下

Vue/Rect 生態(tài)用多了都快忘記原生js怎么寫(xiě)了，今天需要直接在服務(wù)器裸寫(xiě)個(gè)頁(yè)面，實(shí)現(xiàn) textarea 文本框里接收拖拽多個(gè)圖片，同時(shí)能直接粘貼截圖上傳，使用一些現(xiàn)成的框架倒是分分鐘完成，但要直接裸寫(xiě)，還是費(fèi)了思量。

html中的textarea元素

<textarea  id="textarea" placeholder="可拖拽圖片到此上傳，或截圖后在此粘貼"></textarea>

實(shí)現(xiàn)思路：

無(wú)論是拖拽上傳，還是粘貼上傳，本質(zhì)都是使用 FormData 包裝 File數(shù)據(jù)，傳遞給服務(wù)器，關(guān)鍵點(diǎn)是取到File或Blob數(shù)據(jù)。

在拖拽時(shí)，可在 drop 放下動(dòng)作時(shí)，通過(guò)event.dataTransfer.files獲取到文件數(shù)據(jù)。

在粘貼監(jiān)聽(tīng) paste 事件時(shí)，可通過(guò)event.clipboardData.items獲取到剪切板中的第一個(gè)Blob數(shù)據(jù)，然后調(diào)用Blog的getAsFile轉(zhuǎn)為File。

再判斷他們的mime類型如果是圖片，則上傳。

先實(shí)現(xiàn)上傳函數(shù)

使用原生xhr實(shí)現(xiàn)，無(wú)它，簡(jiǎn)單。

假設(shè)服務(wù)器返回json格式數(shù)據(jù)

code=0代表上傳成功，返回url地址，code=其他失敗，msg字段填充失敗信息

// 接口 File或 Blob類型數(shù)據(jù)
const uploadimg=function(file){
    // 創(chuàng)建 FormData 對(duì)象
    var formData = new FormData();

    // 添加圖片文件到表單數(shù)據(jù)中
    formData.append('file', file);

    // 創(chuàng)建 XMLHttpRequest 對(duì)象
    var xhr = new XMLHttpRequest();

    // 設(shè)置上傳完成后的回調(diào)函數(shù)
    xhr.onload = function() {
        if (xhr.status == 200) {
            try {
                // 解析服務(wù)器返回的JSON數(shù)據(jù) {code:0,msg:msg}
                var response = JSON.parse(xhr.responseText);
                if (response && response.code === 0) {      

                } else {
                    console.error('Error uploading image: ' + response.msg);
                }
            } catch (e) {
                console.error('Error parsing server response as JSON');
            }

        } else {
            console.log('Error uploading image');
        }
    };    
    xhr.onerror=function(){
        console.log('error')
    }
    xhr.open('POST', '/index/upload', true);
    // 發(fā)送圖片文件數(shù)據(jù)
    xhr.send(formData);
}

為 textarea 綁定拖拽事件函數(shù)

在拖拽進(jìn)入textarea區(qū)域時(shí)，動(dòng)態(tài)添加一個(gè)outline邊框，以便區(qū)分。

// 元素
var textArea = document.getElementById('textarea');
        
// 拖拽到上方時(shí)，添加一個(gè) outline 樣式
var addOutline = function() {
    textArea.style.outline = "2px solid #0000FF";
};
        
// 松開(kāi)時(shí)，移除outline 樣式
var removeOutline = function() {
    textArea.style.outline = "";
};
        
// 當(dāng)有圖片拖拽進(jìn)入?yún)^(qū)域時(shí)添加outline
textArea.addEventListener('dragenter', function(event) {
    event.stopPropagation();
    event.preventDefault();
    addOutline();
});
        
// 文件在區(qū)域內(nèi)移動(dòng)時(shí)防止瀏覽器默認(rèn)行為
textArea.addEventListener('dragover', function(event) {
    event.stopPropagation();
    event.preventDefault();
});
        
// 文件離開(kāi)區(qū)域時(shí)移除邊框
textArea.addEventListener('dragleave', function(event) {
    event.stopPropagation();
    event.preventDefault();
    removeOutline();
});
        
// 文件放下時(shí)進(jìn)行處理
textArea.addEventListener('drop', function(event) {
    event.stopPropagation();
    event.preventDefault();
    removeOutline();

    // 獲取文件列表
    var files = event.dataTransfer.files;
    if (files.length > 0) {
        // 遍歷處理所有圖片
        [].forEach.call(files,function(file){
           if(file.type.match('image.*')){ 
               uploadimg(file);
           }
        })
    }
});

綁定粘貼處理函數(shù)

再監(jiān)聽(tīng) 粘貼事件，獲取剪切板中第一個(gè)數(shù)據(jù)。

// 粘貼處理函數(shù)
textArea.addEventListener('paste', function(event) {
    // 阻止默認(rèn)行為
    event.preventDefault();

    // 只檢查第一個(gè)數(shù)據(jù)，是否是圖片類型
    if (event.clipboardData && event.clipboardData.items) {
        var items = event.clipboardData.items;
        let i=0;
        // 如果找到圖片類型
        if (items[i].type.indexOf('image') !== -1) {
            var blob = items[i].getAsFile();
            uploadimg(blob);
        }
    }
});
}