<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./layui2.6.8/css/layui.css">
<title>demo</title>
<style>
.layui-upload-file{display: none;}
</style>
</head>
<body>
<div id="demo">
<ul>
<li>demo1 <button type="button" class="layui-btn upload" lay-data="{str:'demo1'}">上传</button></li>
<li>demo2 <button type="button" class="layui-btn upload" lay-data="{str:'demo2'}">上传</button></li>
<li>demo3 <button type="button" class="layui-btn upload" lay-data="{str:'demo3'}">上传</button></li>
<li>demo4 <button type="button" class="layui-btn upload" lay-data="{str:'demo4'}">上传</button></li>
<li>demo5 <button type="button" class="layui-btn upload" lay-data="{str:'demo5'}">上传</button></li>
</ul>
</div>
</body>
</html>
<script src="./layui2.6.8/layui.js"></script>
<script>
layui.use(['element','upload','jquery'], function(){
var upload = layui.upload,$ = layui.jquery,element = layui.element;
var uploadInst = upload.render({
elem: '.upload' //绑定元素
,url: '/upload/' //上传接口
,accept: "file"
,data:{} // 这里不需要定义数据内容，由文件提交上传前的回调方法里赋值
,done: function(res){
//上传完毕回调
}
,error: function(){
//请求异常回调
}
,before:function(res){ // 文件提交上传前的回调
// console.log(this);
// 获取当前button上的lay-data中str字段数据
let str = this.str;
// 动态给upload组件data参数传递数据，data:{str:'demo'}
this.data.str = str;
// console.log(this);
// 到这里就结束了，传递给后端的数据里可以看到str字段
}
});
});
</script>
layui一个页面使用多个文件upload上传按钮
需积分: 0 98 浏览量
2022-09-02
17:47:41
上传
评论
收藏 357KB ZIP 举报
demo_upload.zip （16个子文件） 
demo layui2.6.8 css 
layui.css 78KB modules layer default 
loading-2.gif 2KB
icon.png 11KB loading-1.gif 701B layer.css 14KB icon-ext.png 6KB loading-0.gif 6KB laydate default laydate.css 7KB code.css 1KB layui.js 284KB font iconfont.eot 46KB iconfont.ttf 45KB
iconfont.svg 299KB iconfont.woff 30KB iconfont.woff2 25KB
demo.html 2KB
评论0