要查看已上传的文件，必须在上传成功后将文件信息渲染为DOM节点并放入设定了height和overflow-y:auto的容器中，否则滚动条无内容可滚。
拖动滚动条本身不会“查看已上传的文件”——它只是滚动页面，和文件上传状态无关。真正要实现“查看已上传的文件”，得靠前端维护一个已上传成功的文件列表，并渲染成 DOM 元素（比如 <li> 或 <div>），滚动条才会有东西可滚。
为什么滚动条动了但看不到已上传文件
常见现象是：文件上传成功了，控制台也打印了响应，但页面上没显示任何内容，拖动滚动条也没用。根本原因是：你没把上传结果渲染到页面上，DOM 里压根没有那些文件项，滚动区域自然空空如也。
- 上传成功后只调了
console.log或alert，没操作document - 渲染逻辑写在错误的回调位置（比如写在
fetch().then()外层，没等异步完成就执行） - 容器元素（如
<div id="file-list">）缺少height和overflow-y: auto，导致内容溢出但不可滚动
如何让“已上传文件”可滚动查看
关键不是控制滚动条，而是让文件列表具备可滚动的容器结构，并确保每次上传成功后追加真实 DOM 节点。
- 给文件列表容器设固定高度和滚动样式：
style="height: 300px; overflow-y: auto;" - 每次
fetch或XMLHttpRequest成功后，用document.createElement创建新项，再appendChild到容器中 - 避免直接用
innerHTML +=，会重绘全部子节点；优先用append()或insertAdjacentElement() - 如果文件很多，考虑虚拟滚动（不在此展开），但几十个以内直接渲染完全没问题
上传成功后怎么安全追加 DOM 节点
别在 drop 事件里直接渲染——那是拖入时刻，还没上传完。必须等服务器返回确认成功，再更新 UI。
立即学习“前端免费学习笔记（深入）”；
- 在
fetch('/upload', { method: 'POST', body: formData })的.then(response => response.json())回调里处理渲染 - 检查响应是否真成功：
if (response.success) { appendFileItem(response.filename, response.size) } -
appendFileItem函数内部创建<div class="uploaded-file"><span>xxx.jpg</span><small>2.4 MB</small></div>并插入容器 - 上传失败时也要反馈（比如加红色提示），否则用户会以为“没反应=没传”，反复拖拽
最常被忽略的一点：容器没设置 overflow-y: auto 却指望滚动条出现；或者上传逻辑和渲染逻辑被拆得太散，导致“上传完成了，但页面不知道”。滚动条只是表象，背后是数据流和 DOM 更新是否闭环。
