本唐夫人(怕不是个傻子) 因为这个功能烧了好多脑细胞,话不多,上代码!
HTML:
<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"></tbody>
</table>
</div>
<button type="button" class="layui-btn site-demo-active" data-type="loading" id="testListAction">开始上传</button>
</div>
注意要更layui的upload.js
这个是我的文件目录,可以参考!
1.在dataType:“json” 后面添加
,xhr:l.xhr(function(e){//此处为新添加功能
var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
l.progress(percent);//回调将数值返回
})
注意前面的,一点要注意,不然会报错的!
2.搜索 p.prototype.config 在{内添加 ,xhr:function(){} 不要忘记 , 在最后添加。}
更改了,layui的源代码后,就没有什么技术难题了,
js代码:
layui.use(['form', 'layedit', 'laydate','element', 'upload','table'], function(){
var $ = layui.jquery
,element = layui.element;
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '{{url('vadd')}}'
,accept: 'file'
,multiple: true
,auto: false
,bindAction: '#testListAction'
,xhr:xhrOnProgress
,progress:function(value){//上传进度回调 value进度值
element.progress('demo', value+'%');//设置页面进度条
}
,choose: function(obj){
_files=[];
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var fileseli = ((file.size/1014).toFixed(1));
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+(file.size/1014).toFixed(1) +'kb</td>'
,'<td> <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">\n' +
' <div class="layui-progress-bar layui-bg-red" lay-percent="(file.size/1014).toFixed(1)%"></div>\n' +
' </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 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
console.log(res);
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
_files.push(res.file);
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
});
好了,就这么多!
效果看图;
1.
2.3.
好了,上传成功了,有什么问题,请留言!