直接给 td 绑点击事件不触发 input[type="file"]，因浏览器安全策略仅允许用户真实交互（如点击、回车）触发文件选择框；JS 模拟 click() 会被静默拒绝。
为什么直接给 td 绑点击事件不触发 input[type="file"]？
浏览器安全策略限制：只有用户**真实交互行为**（如鼠标点击、空格/回车键）触发的 click() 才能打开文件选择框。如果通过 js 模拟点击（比如 td 上监听 click 后调用 input.click()），在 chrome/firefox 等现代浏览器中会被静默拒绝，控制台可能无报错但毫无反应。
真正可行的方式是让隐藏的 input **视觉上覆盖或紧邻可点击文字**，且保持其原生可交互性。Layui 表格单元格默认不支持内联表单控件直接响应，需手动干预 DOM 结构。
如何在 Layui 表格列中插入可点击上传入口？
核心思路：在 layui.table 的 cols 配置中使用 templet 返回带隐藏 input 和包裹文字的 HTML，并用 CSS 控制样式。关键点不是“绑定事件”，而是“让文字成为 input 的 label 或父容器”。
- 用
<label>包裹文字，并设置for属性指向input的id（最稳妥，点击 label 自动触发对应 input） - 或把
input设置为position: absolute; opacity: 0; width: 100%; height: 100%，并用z-index确保它盖在文字上方（需父容器position: relative） - 务必给
input添加accept和multiple（如需）等属性，避免用户选错类型 - Layui 渲染后 DOM 是动态生成的，所以
input的id必须唯一——建议用表格行数据的id或索引拼接，例如upload-input-<code>data.id
示例 templet：
templet: function(d) {
return '<label for="upload-input-' + d.id + '" style="cursor: pointer; color: #01aaed; text-decoration: underline;">点击上传</label>' +
'<input type="file" id="upload-input-' + d.id + '" accept=".pdf,.doc,.docx" style="display:none">';
}
如何拿到上传文件并提交到后台？
不能依赖 input 的 onchange 直接取 files，因为 Layui 表格重绘（如分页、搜索、刷新）会导致 DOM 重建，事件监听丢失。正确做法是：在 templet 中不绑事件，改用事件委托监听整个表格容器。
- 给表格容器加个 ID，比如
id="user-table" - 用
$(document).on('change', '#user-table input[type="file"]', function(){...})捕获变化 - 通过
$(this).attr('id')解析出所属行数据标识（如upload-input-123→123），再用table.cache['yourTableId']查对应行原始数据 - 推荐用
FormData提交：创建新实例 →.append('file', this.files[0])→.append('row_id', rowId)→fetch或$.ajax - 注意：
this.files是实时的，但上传后若要清空 input（避免重复选同一文件不触发 change），需手动设this.value = ''
常见踩坑点：样式遮挡、重复渲染、跨域与权限
隐藏 input 如果没设置 width/height 或父容器未设 position: relative，可能导致点击区域失效；Layui 的 reload() 会销毁并重建所有单元格 DOM，所以所有事件监听必须走事件委托，不能写在 templet 里用 onclick=""。
- Chrome 95+ 对
input[type="file"]的自动聚焦和弹窗拦截更严格，确保用户操作链路是“人点文字 → 浏览器唤起选择框”，不要中间加 setTimeout 或异步逻辑 - 如果后端要求带 token，别把 token 写死在前端请求头里，应从页面已有 meta 标签或全局变量读取，避免 XSS 风险
- 移动端 Safari 对
click()触发文件选择支持不稳定，优先用label方式，避免绝对定位覆盖
最易被忽略的是：Layui 表格列宽自适应时，label 文字可能换行，导致部分区域点击无效——给 label 加 white-space: nowrap; display: inline-block 更可靠。
