17370845950

HTML5拖拽上传必须在dragover事件中调用event.preventDefault()，否则drop事件不会触发；drop事件中通过e.dataTransfer.files获取文件列表，需转为数组处理，并校验files.length>0以区分文件与链接等非文件内容。

dragover 事件必须阻止默认行为，否则 drop 不会触发

HTML5 拖拽上传的核心是 drop 事件，但它有个硬性前提：目标元素在 dragover 阶段必须调用 event.preventDefault()。浏览器默认会忽略 drop，除非明确告诉它“这里允许投放”。常见错误是只监听 drop 却忘了处理 dragover，结果拖文件到区域后光标始终是“禁止”符号，drop 根本不执行。

• 必须同时监听 dragover 和 drop
• dragover 中只需 event.preventDefault()，无需其他逻辑
• 可额外设置 event.dataTransfer.dropEffect = 'copy' 改变光标样式（非必需）

从 event.dataTransfer.files 获取 File 对象数组

drop 事件的 event.dataTransfer 是关键入口，其中 files 属性才是真正的文件列表。注意它不是 FileList 的副本，而是只读原生对象，不能用数组方法直接操作；但可以转成数组再处理：

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer.files); // 转为真数组
  files.forEach(file => {
    console.log(file.name, file.size, file.type);
  });
});

• e.dataTransfer.files 是 FileList，类数组，无 forEach
• 单个 File 对象继承自 Blob，可直接用于 FormData.append()
• 拖拽多个文件时，files.length > 1，需循环上传或合并处理

区分拖拽文件和拖拽网页链接/文本

用户可能拖进来的不是文件，而是 URL、纯文本甚至网页内图片链接——这些也会触发 drop，但 e.dataTransfer.files.length === 0。此时应检查 e.dataTransfer.types 或读取 getData() 内容，避免误判：

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  if (e.dataTransfer.files.length > 0) {
    // 真实文件，走上传流程
  } else if (e.dataTransfer.types.includes('text/uri-list')) {
    // 拖入的是链接，可忽略或提示
    console.warn('仅支持文件上传，不支持链接');
  }
});

• e.dataTransfer.files.length === 0 是判断是否为文件的最简依据
• e.dataTransfer.types 是字符串数组，包含 'Files' 表示有文件，但兼容性不如直接查 files
• 某些浏览器（如 Safari）对非文件拖放行为更宽松，务必做空校验

input[type="file"] 的 accept 属性无法限制拖拽来源

accept 只影响点击 弹出的选择框，对拖拽进来的文件完全无效。拖拽时浏览器不会过滤类型，所有文件都会进入 dataTransfer.files。真正有效的校验必须在 JS 层手动做：

• 检查 file.type（MIME 类型，如 'image/png'），但可能为空（尤其本地文件）
• 更可靠的是用 file.name 匹配后缀，例如 /.(jpg|jpeg|png)$/i.test(file.name)
• 如需严格校验，得读取文件头（FileReader + slice()），但会增加延迟

拖拽上传的识别逻辑其实很简单：靠 dataTransfer.files 是否有内容，而不是靠界面配置。很多问题都源于没意识到这个对象才是唯一可信来源。