layuid多⽂件上传
借阅
前端代码
<form class="layui-form" action="#" method="post" id>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多⽂件</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr><th>图⽚</th>
<th>⼤⼩</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList">
<notempty name="list">
<volist name="list" id="vo">
<tr>
<th><img src="__ROOT__/Uploads/{$vo.img}" ></th>
<th>不计</th>
<th>在线</th>
<th><div class="layui-btn layui-btn-mini layui-btn-danger" onclick="imgDel({$vo['img_id']})">删除</div></th>    </tr>
</volist>
</notempty>
</tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
<input type="hidden" name="sid" value="{$_GET['id']}" />
<input class="layui-btn" type="submit" value="提交"></button>
</div>
</form>
JS 代码
layui.use('upload', function(){
var upload = layui.upload;
console.log(upload);
//执⾏实例
//多⽂件列表⽰例
var demoListView = $('#demoList')
,uploadListIns = der({
elem: '#testList'
,url: '{:U("Admana/uploadAll")}'
,accept: 'file'
,multiple: true
,
auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的⽂件追加到⽂件队列
//读取本地⽂件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td><img src='+result+' ></td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
inputtypefile不上传文件
,'<td>等待上传</td>'
,'<td>'
/
/            ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-mini 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]; //删除对应的⽂件
<()[0].value = ''; //清空 input file 值，以免删除后出现同名⽂件不可选        });
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.img != ''){
var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();
tds.eq(2).html('<span >上传成功</span>');
tds.eq(3).html(''); //清空操作
var str = '<input type="hidden" name="photo[]" value='+res.img+'>';
$('#demoList').append(str);
return delete this.files[index]; //删除⽂件队列已经上传成功的⽂件
}
<(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span >上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显⽰重传
}
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。