html+js原生语法的上传器：拖拽+粘贴上传-平芜编程栈

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>混合媒体上传器</title><style>:root{--primary-color:#4a90e2;--success-color:#2ecc71;--danger-color:#e74c3c;--bg-color:#f9f9f9;}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:flex;justify-content:center;padding:40px 20px;background-color:#f0f2f5;}.upload-wrapper{width:100%;max-width:700px;background:white;padding:30px;border-radius:16px;box-shadow:0 10px 30pxrgba(0,0,0,0.1);}h2{margin-top:0;color:#333;font-size:1.5rem;text-align:center;}/* 上传框基础样式 */.upload-area{position:relative;border:2px dashed #ccd0d5;border-radius:12px;padding:60px 20px;text-align:center;background:var(--bg-color);transition:all 0.25s ease;cursor:pointer;outline:none;}/* 悬停状态 */.upload-area:hover{border-color:#999;background:#f1f1f1;}/* 点击/激活状态 - 增强粘贴交互感 */.upload-area.is-active{border-color:var(--primary-color);background:#f0f7ff;box-shadow:0 0 0 4pxrgba(74,144,226,0.1);transform:translateY(-2px);}/* 拖拽进入状态 */.upload-area.drag-over{border-color:var(--success-color);background:#e8f5e9;}.upload-area p{margin:10px 0;color:#666;font-size:1rem;}.upload-area .hint{font-size:0.85rem;color:#999;}.btn-select{margin-top:15px;padding:8px 20px;background:var(--primary-color);color:white;border:none;border-radius:6px;font-weight:500;cursor:pointer;}/* 预览网格 */.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-top:30px;}.preview-item{position:relative;aspect-ratio:1 / 1;border-radius:8px;overflow:hidden;background:#eee;border:1px solid #ddd;}.preview-item img, .preview-item video{width:100%;height:100%;object-fit:cover;}.delete-btn{position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.5);color:white;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;}.delete-btn:hover{background:var(--danger-color);}/* 视频标识 */.video-badge{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,0.6);color:white;font-size:10px;padding:2px 6px;border-radius:4px;pointer-events:none;}</style></head><body><divclass="upload-wrapper"><h2>媒体上传器</h2><divid="drop-zone"class="upload-area"tabindex="0"><p>拖拽图片/视频到此处</p><pclass="hint">或者点击选中后直接 Ctrl+V 粘贴</p><buttonclass="btn-select"onclick="document.getElementById('file-input').click()">选择文件</button><inputtype="file"id="file-input"multipleaccept="image/*,video/*"hidden></div><divid="preview-grid"class="preview-grid"></div></div><script>constdropZone=document.getElementById('drop-zone');constfileInput=document.getElementById('file-input');constpreviewGrid=document.getElementById('preview-grid');// --- 1. 视觉交互逻辑 ---// 点击上传框激活dropZone.addEventListener('click',(e)=>{dropZone.focus();dropZone.classList.add('is-active');});// 点击外部取消激活document.addEventListener('click',(e)=>{if(!dropZone.contains(e.target)){dropZone.classList.remove('is-active');}});// 拖拽高亮['dragenter','dragover'].forEach(name=>{dropZone.addEventListener(name,(e)=>{e.preventDefault();dropZone.classList.add('drag-over');});});['dragleave','drop'].forEach(name=>{dropZone.addEventListener(name,(e)=>{e.preventDefault();dropZone.classList.remove('drag-over');});});// --- 2. 文件获取逻辑 ---// 处理拖拽dropZone.addEventListener('drop',(e)=>{constfiles=e.dataTransfer.files;handleFiles(files);});// 处理粘贴 (仅当框激活时)document.addEventListener('paste',(e)=>{if(document.activeElement===dropZone||dropZone.classList.contains('is-active')){constitems=e.clipboardData.items;constfiles=[];for(leti=0;i<items.length;i++){if(items[i].kind==='file'){files.push(items[i].getAsFile());}}if(files.length>0){handleFiles(files);// 成功粘贴的视觉反馈showSuccessFeedback();}}});// 处理选择按钮fileInput.addEventListener('change',(e)=>{handleFiles(e.target.files);fileInput.value='';// 重置，允许重复选同一文件});// 成功提示反馈functionshowSuccessFeedback(){dropZone.style.borderColor='var(--success-color)';setTimeout(()=>dropZone.style.borderColor='',500);}// --- 3. 核心处理与回显 ---functionhandleFiles(files){[...files].forEach(file=>{if(file.type.startsWith('image/')||file.type.startsWith('video/')){renderPreview(file);}});}functionrenderPreview(file){constitemContainer=document.createElement('div');itemContainer.className='preview-item';constdeleteBtn=document.createElement('button');deleteBtn.className='delete-btn';deleteBtn.innerHTML='&times;';deleteBtn.onclick=()=>{URL.revokeObjectURL(mediaTag.src);// 释放内存itemContainer.remove();};letmediaTag;constfileURL=URL.createObjectURL(file);if(file.type.startsWith('image/')){mediaTag=document.createElement('img');mediaTag.src=fileURL;}else{mediaTag=document.createElement('video');mediaTag.src=fileURL;mediaTag.muted=true;mediaTag.playsInline=true;// 抓取视频第一帧mediaTag.addEventListener('loadeddata',()=>{mediaTag.currentTime=0.1;});// 添加视频标识constbadge=document.createElement('div');badge.className='video-badge';badge.innerText='VIDEO';itemContainer.appendChild(badge);// 点击预览图可以静音播放itemContainer.onclick=()=>{mediaTag.paused?mediaTag.play():mediaTag.pause();};}itemContainer.appendChild(mediaTag);itemContainer.appendChild(deleteBtn);previewGrid.appendChild(itemContainer);}</script></body></html>
html+js原生语法的上传器：拖拽+粘贴上传

什么是计算机网络安全？初学者指南：概念、技术与学习资料全汇总

SpringBoot+Vue 学生评奖评优管理系统平台完整项目源码+SQL脚本+接口文档【Java Web毕设】

03. NFS服务器

Java版LeetCode热题100之「LRU 缓存」详解

入门网络安全工程师要学习哪些内容【2026年寒假最新学习计划】

vue基于Python老年人服务预约系统 flask django Pycharm
