layui upload 的 progress 回调需手动操作 DOM：提前创建唯一进度条容器，通过 data 属性或闭包关联 upload 实例，在回调中用 style.width 和 textContent 高效更新，避免高频重绘与 XSS 风险。
layui upload 的 progress 回调里怎么操作 DOM
layui 的 upload 组件本身不提供「替换进度条 HTML 结构」的配置项，progress 回调只传入 percent（0–100 的数字）和 obj（当前上传实例），没有内置的进度条 DOM 节点。所以你得自己写一个进度条容器，并在 progress 回调里手动更新它。
必须手动创建并绑定到 upload 实例的 DOM 元素
常见错误是直接在 progress 里用 document.getElementById 查找元素，但容易因异步或多次上传导致错乱。正确做法是：在触发 upload 前就准备好唯一 DOM 节点，并通过 obj 关联它（比如用 data-id 或闭包）。
- 在页面中提前写好自定义进度条结构，例如：
<div class="my-upload-progress" data-id="avatar"> <div class="bar"></div> <span class="text">0%</span> </div>
- 在
upload.render()的progress回调中，用obj.config.elem或额外传入的标识定位对应 DOM - 不要依赖全局 ID；多个上传控件共存时，推荐用
obj.item（如果是绑定在上）或自定义data-xxx属性来区分
progress 回调里更新 DOM 的注意事项
progress 是高频回调（尤其大文件），直接频繁操作 innerHTML 或 style 可能卡顿。实际操作建议：
- 用
element.style.width = percent + '%'更新宽度，比重绘整个 DOM 更轻量 - 百分比文本用
textContent替代innerHTML，避免 XSS 风险和解析开销 - 如果需要动画效果，别用
transition: width .2s—— layui 的 progress 频率高，CSS 过渡可能堆积延迟；改用requestAnimationFrame节流（小文件可忽略） - 注意：progress 在 Chrome/Firefox 中正常触发，但在某些旧版 Safari 或 Electron 内核中可能不触发，需 fallback 到
done后统一显示“上传完成”
完整最小可运行示例
假设你有一个头像上传按钮和对应进度条：
<button id="uploadBtn">选择头像</button> <div class="my-progress" data-for="avatar"> <div class="bar"></div> <span class="text">0%</span> </div>
JS 部分：
layui.use('upload', function(){
var upload = layui.upload;
var $ = layui.$;
upload.render({
elem: '#uploadBtn',
url: '/api/upload',
auto: false,
bindAction: '#uploadBtn',
progress: function(percent, obj){
var bar = $('.my-progress[data-for="avatar"] .bar')[0];
var text = $('.my-progress[data-for="avatar"] .text')[0];
if(bar && text){
bar.style.width = percent + '%';
text.textContent = Math.round(percent) + '%';
}
},
done: function(res){
// 成功后可隐藏或重置进度条
$('.my-progress[data-for="avatar"] .bar').css('width', '0%');
$('.my-progress[data-for="avatar"] .text').text('0%');
}
});
});
真正麻烦的不是写这几行，而是当页面有 N 个上传入口、每个都要不同样式、还要支持取消/重试时，progress 回调里的 DOM 定位和状态清理很容易漏掉。别图省事复用同一个进度条节点。
