跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

layui upload手动上传 layui如何点击按钮后才开始上传

layui upload需设auto: false实现手动上传,choose只读文件,upload()才发请求;elem必为真实DOM节点,多行上传须动态render并destroy旧实例。 auto: false 是手动上传的开关,不是可选项 layui upload 默认是
auto: true
,选完文件立刻发请求——这在需要二次确认、校验文件名或拼接额外参数时根本不可控。必须显式设为
false
,否则后面所有“点击上传”逻辑都白搭。 常见错误现象:
choose
回调里能拿到文件,但没点按钮就已上传;或者点了上传按钮却没反应——八成是忘了关
auto
。
auto: false
后,
choose
只负责读取文件,不触发上传 上传动作必须由你主动调用实例的
upload()
方法(注意不是
submit()
) 如果用了
multiple: true
,
upload()
会批量上传所有已选文件 upload.render() 必须绑定真实 DOM 元素,不能只靠 lay-options 很多人想省事,直接写
就完事——不行。layui upload 的
elem
是必填项,且必须指向一个真实存在的节点(哪怕它是隐藏的
)。 使用场景:你想用文字链接、图标按钮甚至表格操作列里的“上传”文字来触发,就得先挂一个“傀儡”文件域,再让 upload 实例绑定它。 推荐做法:放一个
upload.render({ elem: '#hiddenFileInput', auto: false, ... })
然后在你的自定义按钮里
$('#hiddenFileInput')[0].click()
模拟点击——这是唯一可靠唤起文件选择框的方式 手动上传要分两步走:选 + 传,别混成一步 所谓“点击按钮后才上传”,本质是把「选择文件」和「发起请求」拆成两个独立动作。很多坑就出在混淆了这两个阶段。 典型错误:
choose
回调里存了
obj
,但没保存;等点上传按钮时,
obj
已失效,调
upload()
报错
"No file selected"
。 在
choose
中必须缓存
obj
实例(比如赋给全局变量
window.uploadChooseObj
或组件级
this.chooseObj
) 上传按钮的 click 事件里,调用
window.uploadChooseObj.upload()
,而不是重新 render 若允许多选,
upload()
会自动遍历所有已选文件;无需自己循环 表格行内上传必须动态 render,不能页面加载时一次性初始化 表格数据是动态渲染的,每行都有自己的 ID 和上传上下文(比如要传
pluginId=123
),这时如果所有行共用一个 upload 实例,参数就会串,上传结果对不上行。 性能影响:每次点某一行的上传,都要先
destroy()
旧实例,再用当前行的元素和参数
render()
新实例——看起来重,但实际开销极小;比强行用事件委托+全局状态维护清晰得多。 每行模板里放独立的
点击时,用
$(this).closest('tr').find('.upload-input')
定位当前行输入框 先检查是否有旧实例:
if (self.inst) self.inst.destroy()
,再
upload.render({ elem: $input[0], url: '/upload?pluginId=' + id, ... })
最容易被忽略的是 destroy 不干净导致内存泄漏,或者忘记给每个 input 加唯一 data 属性——结果所有行都传到同一个 ID 下。

相关文章