HTML如何实现拖拽上传？文件怎么拖到网页上传？

div

<div id="dropZone" style="border: 2px dashed #ccc; padding: 50px; text-align: center; font-family: sans-serif; cursor: pointer; transition: border-color 0.3s ease;">
    将文件拖拽到此处上传
</div>
<div id="uploadStatus" style="margin-top: 20px; font-family: sans-serif; color: #555;"></div>

document.addEventListener('DOMContentLoaded', () => {
    const dropZone = document.getElementById('dropZone');
    const uploadStatus = document.getElementById('uploadStatus');

    // 阻止默认行为：当文件被拖拽到元素上方时
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault(); // 阻止浏览器默认行为，如打开文件
        e.stopPropagation(); // 阻止事件冒泡
        dropZone.style.borderColor = '#007bff'; // 视觉反馈
    });

    // 阻止默认行为：当文件离开元素时
    dropZone.addEventListener('dragleave', (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropZone.style.borderColor = '#ccc'; // 恢复视觉反馈
    });

    // 处理文件放下事件
    dropZone.addEventListener('drop', (e) => {
        e.preventDefault(); // 阻止浏览器默认行为，如打开文件
        e.stopPropagation();
        dropZone.style.borderColor = '#ccc'; // 恢复视觉反馈

        const files = e.dataTransfer.files; // 获取拖拽的文件列表

        if (files.length > 0) {
            uploadStatus.textContent = `正在处理 ${files.length} 个文件...`;
            handleFiles(files);
        } else {
            uploadStatus.textContent = '没有文件被拖拽。';
        }
    });

    function handleFiles(files) {
        const formData = new FormData();

        // 遍历所有文件并添加到 FormData 对象
        for (let i = 0; i < files.length; i++) {
            // 可以在这里添加文件类型和大小校验
            const file = files[i];
            if (!file.type.startsWith('image/') && !file.type.startsWith('video/')) {
                uploadStatus.textContent = `文件 "${file.name}" 类型不受支持，请上传图片或视频。`;
                return; // 或者跳过当前文件，继续处理下一个
            }
            if (file.size > 10 * 1024 * 1024) { // 限制10MB
                uploadStatus.textContent = `文件 "${file.name}" 过大，请上传小于10MB的文件。`;
                return;
            }
            formData.append('files[]', file); // 'files[]' 是服务器端接收的字段名
        }

        // 发送文件到服务器
        // 注意：这里的 '/upload-endpoint' 需要替换为你的服务器实际上传接口
        fetch('/upload-endpoint', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                // 如果服务器返回非2xx状态码，抛出错误
                return response.text().then(text => { throw new Error(text || `HTTP error! status: ${response.status}`); });
            }
            return response.json(); // 假设服务器返回JSON
        })
        .then(data => {
            console.log('上传成功:', data);
            uploadStatus.textContent = '上传成功！';
            // 这里可以处理服务器返回的数据，比如显示文件链接或预览
        })
        .catch(error => {
            console.error('上传失败:', error);
            uploadStatus.textContent = `上传失败: ${error.message}`;
        });
    }
});