本质是隐藏<input type="file">并用按钮触发其.click()，需确保元素在DOM中、不可用display:none隐藏，推荐opacity:0;position:absolute;pointer-events:none，且必须在用户点击同步上下文中调用。
聊天窗口里点“+”上传文件，本质是隐藏 <input type="file">
浏览器原生不支持直接在 <div> 或消息气泡里触发文件选择——必须靠 <input type="file">，但又不能让它裸露在聊天界面里破坏 UI。常见做法是用一个透明/不可见的 <input>，再用按钮或图标（比如“+”）调用它的 .click() 方法。
关键点：
- <input> 必须在 DOM 中、未被 display: none 或 visibility: hidden 完全移除（否则 Safari 和部分 Android WebView 会拒绝触发）
- 推荐用 opacity: 0; position: absolute; pointer-events: none; 隐藏，同时保留可交互性
- 触发前确保它没被 disabled，且 accept 属性已设好（如 accept="image/*,.pdf"）
上传后立即显示预览（图片/文本），但别等服务器返回才渲染
用户点击“发送”前，应该立刻看到缩略图或文件名，而不是卡着等接口响应。这靠 FileReader 或 URL API 实现：
- 图片：用
URL.createObjectURL(file)快速生成本地临时地址，直接赋给<img src>，无需读取内容 - 文本类（.txt、.log）：用
FileReader.readAsText(file)读取，但仅用于预览，不是必须项 - 其他文件（PDF、ZIP）：只显示文件名 + 图标，
URL.createObjectURL()对 PDF 在 Chrome/Firefox 可预览，但 Safari 不支持内联 PDF 预览
注意：URL.createObjectURL() 生成的地址需在不用时手动释放（URL.revokeObjectURL()），否则内存泄漏；聊天记录若支持撤回，撤回时就得清理对应 URL。
拖拽上传进聊天窗口，得监听 dragover 和 drop 事件
聊天区域默认不接受拖放文件，必须显式阻止默认行为，否则浏览器会打开文件或导航走：
立即学习“前端免费学习笔记（深入）”；
chatContainer.addEventListener('dragover', e => {
e.preventDefault(); // 关键：否则 drop 不触发
});
chatContainer.addEventListener('drop', e => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files);
handleFiles(files); // 你的上传逻辑
});常见坑：
- 只监听 drop 不监听 dragover → 拖入时显示“禁止”图标，无法松手
- e.dataTransfer.files 是 FileList，不是数组，得转成数组才能用 .map() 或 .forEach()
- 移动端不支持拖拽，别指望 iOS/Android 浏览器能响应 drag* 事件
上传进度条嵌在消息气泡里，得靠 XMLHttpRequest.upload.onprogress 或 fetch 的流式读取
如果用 XMLHttpRequest（兼容性好），进度回调在 xhr.upload.onprogress 上；如果用 fetch，原生不暴露上传进度，得靠 ReadableStream 手动分块上传（复杂，不推荐初试）。
简单可靠的做法：
- 用 XMLHttpRequest 封装上传，监听 upload.onprogress 更新气泡里的进度条宽度和文字
- 进度条 DOM 节点要绑定到当前消息元素上（比如用 data-message-id 关联），避免上传完成时更新错气泡
- 别用 setTimeout 模拟进度——用户一眼就能看出假的
注意：大文件上传时，onprogress 可能不触发或跳变（尤其网络不稳定时），建议加个“正在发送…”文案兜底，别只依赖进度数值。
实际做下来，最难的不是功能拼凑，而是把文件生命周期管清楚：从选中、预览、上传中、成功/失败、再到撤回或删除——每个状态都要对应 UI 变化，且不能让 URL.createObjectURL() 堆积，也不能让异步上传回调找不到对应的消息节点。
