Layui中需用accept限制文件选择范围、exts配合file.type或后缀名判断类型并匹配图标，必须在choose回调中手动处理FileList，通过templet或DOM拼接实现多类型文件的差异化图标预览与样式控制。
如何用 accept 和 exts 配合判断文件类型
accept 只控制系统文件选择框里显示哪些大类（比如 images 会过滤掉非图片），但它不参与上传后图标渲染逻辑；真正决定“该显示什么图标”的是 exts 和 file.type。你得在 choose 或 preview 回调里手动读取每个 file 的 name 和 type，再匹配后缀或 mime 类型。
常见错误：只配了 accept: 'file' 就以为能自动区分图标——其实它只是放开选择范围，后续图标逻辑全靠你自己写。
-
file.name可用于提取后缀：file.name.split('.').pop().toLowerCase() -
file.type更可靠但有兼容风险（比如某些浏览器对 .xlsx 返回空字符串） - 推荐组合判断：先看
file.type是否以image/、video/、audio/开头；若为空，再 fallback 到后缀匹配
templet 里怎么根据文件类型返回不同图标
Layui 表格或列表渲染时，templet 是最直接的入口。你不能依赖 upload 模块自带的预览回调，因为那仅限图片且只在 preview 回调中触发（Layui 2.8+ 才支持），而图标区分要覆盖 PDF、ZIP、MP4 等所有类型。
示例（放在表格列配置中）：
templet: function(d) {
const ext = d.file.name.split('.').pop().toLowerCase();
let icon = ' layui-icon-file';
if (/^jpe?g|png|gif|bmp|svg$/i.test(ext)) {
icon = ' layui-icon-picture';
} else if (/^pdf$/i.test(ext)) {
icon = ' layui-icon-file-bord';
} else if (/^zip|rar|7z|tar\.gz$/i.test(ext)) {
icon = ' layui-icon-template';
} else if (/^mp4|avi|mov$/i.test(ext)) {
icon = ' layui-icon-video';
}
return '<i class="layui-icon' + icon + '"></i> ' + d.file.name;
}
注意：layui-icon-file-bord 是 Layui 内置的 PDF 图标类名，别手误写成 file-board；layui-icon-template 常被用来表示压缩包，不是官方语义但社区通用。
多文件上传列表中动态插入带图标预览项
当用户选中多个文件，你要在页面某容器（如 <div id="file-list"></div>）里逐个生成带图标的条目，这时不能只靠 templet，得手动拼 DOM。
关键点：
- 必须在
choose回调里处理，因为只有这时能拿到原始FileList - 遍历前先用
Array.from(obj.files)转成数组，避免for...of闭包问题 - 每个条目应包含：图标 + 文件名 + 大小 + 删除按钮（
data-index记录位置） - 图标类名要和 CSS 样式对应，比如
icon-pdf需提前定义背景图或字体变色
别漏掉大小格式化：Math.round(file.size / 1024) + ' KB'，否则显示 2345678 字节太反人类。
图标颜色和状态样式怎么随类型变化
Layui 的 layui-icon 默认继承父级文字颜色，所以最稳妥的方式是给外层容器加 class，再用 CSS 控制子图标颜色，而不是给每个 <i></i> 加内联 style。
例如：
<div class="file-item file-type-pdf"> <i class="layui-icon"></i> report.pdf </div>
对应 CSS：
.file-type-pdf .layui-icon { color: #d32f2f; }
.file-type-zip .layui-icon { color: #1976d2; }
.file-type-video .layui-icon { color: #ff6f00; }
容易踩的坑：写了 class 却没在页面 里引入对应样式，或者用了 !important 强覆盖导致后续主题切换失效。Layui 图标本质是字体，改 color 就够了，不用碰 background。
真正难的是图标语义一致性——比如 .xlsx 该用文档图标还是表格图标？这没有标准答案，得跟产品约定好，别一个页面里 PDF 用文件图标、Excel 却用表格图标，用户会困惑。
