要實現(xiàn)高級的 H5 拖拽文件上傳功能，關(guān)鍵在于利用 HTML5 的拖拽 API 和文件 API，并處理好用戶體驗、文件類型限制、多文件上傳及狀態(tài)反饋。1. 創(chuàng)建可拖拽區(qū)域并監(jiān)聽 dragover、dragleave 和 drop 事件；2. 在 drop 事件中獲取文件對象并進(jìn)行類型和大小校驗；3. 使用 XMLHttpRequest 實現(xiàn)文件上傳并監(jiān)聽上傳進(jìn)度；4. 支持多文件上傳時控制并發(fā)數(shù)量以優(yōu)化性能；5. 提供可視化反饋如高亮區(qū)域、加載提示和進(jìn)度條以提升用戶體驗。

實現(xiàn)高級的 H5 拖拽文件上傳功能，關(guān)鍵在于利用 HTML5 的拖拽 API 和文件 API，同時處理好用戶體驗、文件類型限制、多文件上傳以及上傳過程中的狀態(tài)反饋。下面是一些實用建議和實現(xiàn)要點。

支持拖拽上傳的基本結(jié)構(gòu)

要實現(xiàn)拖拽上傳，首先需要一個可拖拽區(qū)域（drop zone），通常是一個 <div> 或者表單區(qū)域。這個區(qū)域需要監(jiān)聽 <code>dragover 和 drop 事件。

<div id="drop-zone">將文件拖到這里上傳</div>

然后在 JavaScript 中添加事件監(jiān)聽器：

const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault(); // 必須阻止默認(rèn)行為才能觸發(fā) drop
    dropZone.classList.add('highlight'); // 可視化反饋
});

dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('highlight');
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('highlight');
    const files = e.dataTransfer.files;
    handleFiles(files);
});

限制文件類型和大小

用戶拖拽上傳時，往往需要限制只接受某些類型的文件，比如圖片、PDF 或特定格式的文檔。你可以在 drop 事件中檢查文件類型和大小：

• 檢查文件類型：file.type 或 file.name 的后綴
• 檢查文件大?。?code>file.size（單位是字節(jié)）

function handleFiles(files) {
    const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
    const maxSize = 10 * 1024 * 1024; // 10MB

    for (let file of files) {
        if (!allowedTypes.includes(file.type)) {
            alert(`${file.name} 類型不支持`);
            continue;
        }

        if (file.size > maxSize) {
            alert(`${file.name} 超出最大限制`);
            continue;
        }

        // 正確的文件可以上傳
        uploadFile(file);
    }
}

實現(xiàn)上傳和進(jìn)度反饋

使用 FormData 和 fetch 或 XMLHttpRequest 來上傳文件。如果你希望顯示上傳進(jìn)度，推薦使用 XMLHttpRequest，因為它支持監(jiān)聽上傳事件。

function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            console.log(`${file.name} 已上傳 ${percent.toFixed(0)}%`);
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log(`${file.name} 上傳成功`);
        } else {
            console.error(`${file.name} 上傳失敗`);
        }
    };

    xhr.send(formData);
}

多文件上傳與并發(fā)控制

如果你希望支持多文件上傳，可以在 handleFiles 函數(shù)中遍歷所有文件。如果文件數(shù)量較多，建議控制并發(fā)上傳數(shù)量，避免瀏覽器卡頓或服務(wù)器壓力過大。

一個簡單的并發(fā)控制方法是使用異步隊列：

• 創(chuàng)建一個上傳隊列數(shù)組
• 使用 Promise 控制每次上傳的文件數(shù)量
• 每個上傳完成后從隊列中移除

async function uploadMultipleFiles(files) {
    const queue = [...files];
    const maxConcurrent = 3;
    const inProgress = [];

    while (queue.length > 0 || inProgress.length > 0) {
        while (inProgress.length < maxConcurrent && queue.length > 0) {
            const file = queue.shift();
            const promise = new Promise((resolve) => {
                uploadFile(file);
                resolve();
            });
            inProgress.push(promise);
        }

        await Promise.race(inProgress); // 等待任意一個上傳完成
        inProgress.filter(p => p !== undefined);
    }
}

基本上就這些。拖拽上傳看似簡單，但細(xì)節(jié)處理得當(dāng)才能提升用戶體驗，比如防止誤操作、添加加載狀態(tài)、顯示上傳進(jìn)度條等。這些細(xì)節(jié)雖然不復(fù)雜，但容易被忽略。