form表单中
<div class="layui-upload">
<input class="layui-input" style="width: 560px;margin-left: 110px;" disabled="" value="注意:同时最多选择三个文件,同时最多上传三个文件,上传完三个即可再选再上传">
<button style="margin-left: 110px;" type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
<div style="margin-left: 110px;" class="layui-upload-list" style="max-width: 1000px;">
<table class="layui-table">
<colgroup>
<col>
<col width="150">
<col width="260">
<col width="150">
</colgroup>
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>上传进度</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button style="margin-left: 110px;" type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
<input name="file" class="filess layui-input" value="" type="hidden">
layui.config({
base: '__layuiadmin__/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'upload','laydate' ,'element', 'layer'], function(){
var $ = layui.$
,form = layui.form
,upload = layui.upload
,element = layui.element
,layer = layui.layer
,laydate = layui.laydate;
js文件
var navArr = []; //定义一个数组 用于存储 传过来的 上传文件的路径
//演示多文件列表
var uploadListIns = upload.render({
elem: '#testList'
,elemList: $('#demoList') //列表元素对象
,url: '{:url("upload")}'
,accept: 'file'
,multiple: true
,number: 3
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
,done: function(res, index, upload){ //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
// navArr[]上面外面定义空数组
navArr.push(res.message); //返回的文件地址 存进数组
// console.log(JSON.stringify(navArr))
$(".filess").val(JSON.stringify(navArr));
// $("filess").attr("value",JSON.stringify(navArr));
// $("filess").attr("value", navArr); //把数组 赋值给input的值 一起传过去
return;
//}
this.error(index, upload);
}
,allDone: function(obj){ //多文件上传完毕后的状态回调
console.log(obj)
}
,error: function(index, upload){ //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){ //注意:index 参数为 layui 2.6.6 新增
element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});