layui多任務上傳添加進度條
話不多說直接上代碼
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>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">開始上傳</button>
</div>
js代碼:
//多檔案清單示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '/admin/uploadlist' //改成您自己的上傳接口
,accept: 'file'
,multiple: true
,auto: false
,bindAction: '#testListAction'
, xhr: xhrOnProgress
, progress: function (value) {//上傳進度回調 value進度值
element.progress('demoList', value + '%')//設定頁面進度條
}, xhr: function (index, e) {
var percent = e.loaded / e.total;//計算百分比
percent = parseFloat(percent.toFixed(2));
element.progress('progress_' + index + '', percent * 100 + '%');
console.log("-----" + percent);
}
// , data: JSON.stringify(Param)
,choose: function(obj){
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/1024).toFixed(1) +'kb</td>'
, '<td><div class="layui-progress layui-progress-big" lay-filter="progress_'+index+'" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="500%"></div></div></td>'
,'<td>等待上傳</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 == 200){ //上傳成功
table.reload('test')
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html('<span style="color: #5FB878;">上傳成功</span>');
tds.eq(4).html(''); //清空操作
return delete this.files[index]; //删除檔案隊列已經上傳成功的檔案
}else{
layer.msg(res.message, {
offset: '15px'
,icon: 2
,time: 1000
});
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html('<span style="color: #FF5722;">上傳失敗</span>');
tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
}
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html('<span style="color: #FF5722;">上傳失敗</span>');
tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
}
});
//建立監聽函數
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;
}
}
注:記得資源換成官網最新的,否則可能出現問題。日常開發記錄,歡迎來擾。