HTML怎么做文件拖放上传_html drag drop拖拽上传实现【纯干货】-html教程-PHP中文网

拖放上传需先阻止浏览器默认行为：在dragover和drop事件中调用e.preventdefault()，否则drop不触发；再通过datatransfer.files获取文件，用filereader预览或校验，最后用formdata发送多文件及字段。

html怎么做文件拖放上传_html drag drop拖拽上传实现【纯干货】

怎么监听拖放事件并阻止浏览器默认行为

拖放上传第一步不是写上传逻辑，而是让浏览器别把文件当链接或图片打开——否则一拖进来就跳转或下载，根本进不到你的处理函数里。

关键在于 dragover 和 drop 两个事件必须显式调用 event.preventDefault()，否则 drop 根本不会触发。

dragover 事件只用于“允许放置”，不传文件，但必须阻止默认行为，否则 drop 被禁用
drop 事件里才能从 event.dataTransfer.files 拿到 FileList
别漏掉 dragenter（可选），但 dragleave 处理起来容易误判，初学者建议先忽略

const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', e => {
  e.preventDefault(); // 必须
});
dropArea.addEventListener('drop', e => {
  e.preventDefault(); // 必须
  const files = e.dataTransfer.files; // 这才是真实文件列表
  handleFiles(files);
});

如何读取文件内容并预览或校验

拿到 FileList 后不能直接发请求，得先做用户侧处理：比如图片预览、大小检查、类型过滤。这些都依赖 FileReader，但它异步，别想同步获取结果。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

用 file.type 判断 MIME 类型（如 "image/jpeg"），但不可信——用户可改后缀，需服务端二次校验
用 file.size 做前端限制，比如拒绝 >50MB 的文件，避免上传中途失败
图片预览用 readAsDataURL，生成 base64 后赋值给 <img src>；大文件慎用，会吃内存
文本类文件（如 .log）可用 readAsText，注意指定编码（默认 UTF-8）

function handleFiles(files) {
  Array.from(files).forEach(file => {
    if (file.size > 50 * 1024 * 1024) {
      console.warn(`${file.name} 超过 50MB，跳过`);
      return;
    }
    const reader = new FileReader();
    reader.onload = e => {
      const img = document.createElement('img');
      img.src = e.target.result;
      document.body.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
}

怎么用 FormData 发送多文件且带额外字段

上传不是只扔文件，常要附带 userId、category 等字段。FormData 支持追加任意键值，但注意：同名 key 可多次 append，后端收到的就是数组（如 PHP 的 $_FILES['files'] 是多维数组，而 $_POST['tag'] 是字符串）。

每个 File 对象直接传给 formData.append('files', file)，不用转 blob
额外字段用 formData.append('tag', 'report')，和文件一起发，无需 JSON.stringify
fetch 时设 Content-Type: multipart/form-data 是错的——浏览器会自动设，并带上正确的 boundary，手动设反而破坏格式
如需进度条，监听 upload.onprogress（XMLHttpRequest）或用 ReadableStream（fetch 较新，兼容性差）

function uploadFiles(files) {
  const formData = new FormData();
  for (const file of files) {
    formData.append('files', file); // 注意 key 名和服务端约定一致
  }
  formData.append('projectId', '123');
  formData.append('source', 'dragdrop');
<p>fetch('/api/upload', {
method: 'POST',
body: formData // 不要设 headers.Content-Type
});
}</p>

常见报错和兼容性注意点

拖放上传在 Safari 和旧版 Edge 上容易翻车，不是代码逻辑问题，而是浏览器策略差异。

Failed to execute 'readAsDataURL' on 'FileReader': The requested file could not be read → 文件被其他进程占用（如 Windows 下用资源管理器正打开该文件），或路径非法（但浏览器里一般不会）
Safari 15.4+ 才支持 dataTransfer.items 的 getAsFile()，老版本只能靠 dataTransfer.files，别混用
移动端基本不支持 drag/drop（iOS Safari 完全禁用），必须降级为点击 <input type="file">，用 click() 触发
如果后端返回 400 却没提示，大概率是字段名不匹配（如前端传 files，后端收 file），先抓包确认请求体结构