直接操作DOM无法保证上传顺序，因为Layui upload的done回调仅按触发顺序拼接字符串，不维护与原始文件队列的映射关系，且index参数不可靠；并发上传响应时间不确定，导致视觉顺序与后端接收顺序脱节。
为什么直接操作 DOM 无法保证上传顺序
layui 的 upload.render() 在 done 回调里插入预览节点时，只是静态 append，不维护与原始文件队列的映射关系。你看到的图片顺序，其实是 dom 插入顺序，而表单提交时后端拿到的仍是按 done 触发顺序拼接的字符串（比如 "a.jpg,b.jpg,c.jpg"），和拖拽后的视觉顺序完全脱节。
更麻烦的是：Layui 不暴露已上传项的索引绑定机制，index 参数在 done 中只反映「本次上传在队列中的位置」，不是「最终列表中的序号」；一旦多图并发上传完成时间不同，index 就彻底不可靠。
用 Sortable.js 接管预览容器并同步数据
必须等 done 执行完毕、所有 <img> 真实插入到 .layui-upload-list 后，再初始化 Sortable —— 提前初始化会找不到目标元素；延后则可能被用户抢先拖拽，导致状态错乱。
-
el必须指向预览容器本身（如document.getElementById('demo2')），不能是子元素 - 启用
animation: 150，避免拖拽反馈卡顿 - 移动端务必加
forceFallback: true，否则 iOS Safari 不触发dragstart - 在
onEnd回调里用evt.oldIndex和evt.newIndex调整你维护的数组（如uploadedFiles = []） - 别忘了把新顺序写回隐藏域：
$('input[name="fileOrder"]').val([1,3,0,2].join(','))
预览容器样式与拖拽反馈必须手动补
Sortable 默认不提供插入占位符，Layui 的 .layui-upload-list 也没预留样式空间，拖拽时用户根本看不出“松手后会插在哪”。
- 给
.layui-upload-list加position: relative，否则ghostClass定位偏移 - CSS 中定义
.sortable-ghost { opacity: .6; }和.sortable-chosen { transform: scale(1.02); } - 如果预览区混有 loading 占位图（比如上传中状态），Sortables 会把它一起拖——建议只在
done后 append 成功项，避免干扰
后端必须按前端传的顺序索引处理
浏览器上传本身不保证顺序，HTTP 请求并发发出、响应返回时间不确定，所以后端绝不能依赖请求到达顺序或文件名排序。唯一可靠依据是前端传来的 fileOrder 字段（如 "2,0,3,1"），它对应原始文件数组的下标。
容易被忽略的一点：如果你用的是 Laravel、ThinkPHP 等框架的文件上传中间件，它们默认把多文件当作独立请求处理，不会保留原始选择顺序。必须显式读取 fileOrder 并重排 $_FILES 或 $request->file() 数组，否则前端拖了白拖。
