layui多檔案上傳分別顯示對應檔案的進度

2021-10-04 23:22:49 字數 936 閱讀 5352

3、邏輯js**參考如下,本地測試上傳大檔案可以比較容易看到進度條效果,不太確定上傳檔案進度是不是指載入好檔案的進度,因為檔案上傳進度為100%時,還要需要一定時間等待伺服器響應返回結果,所以下面**處理為當檔案進度為100%時,人工顯示99%,當對應檔案的上傳請求完畢後done時才把進度顯示為100%,當全部檔案上傳完畢再取消上傳檔案顯示的loading,刪除進度條。

var progresstpl = '

';

var loadindex = 0;

var multifileview = $('#upbgfilelist')

, uploadlistins = layupload.render(

,progress: function(n, elem, e, index)

var percent = n + '%'; //獲取進度百分比

if(n > 99)else

}, done: function (res, index, upload)

this.error(index, upload);

}, error: function (index, upload)

,alldone: function(obj)else

}});

還有乙個點是這裡的進度條動態改變百分比要這樣子寫才有正確顯示百分比值文字效果:

$("#" + layid).find(".layui-progress-bar").attr("lay-percent", percent);

4、目前實現不了多檔案上傳的總進度條,因為多檔案上傳choose檔案之後預覽preview檔案也有時間差,progress那裡也是,導致前面的小檔案很快進度100%,但是大檔案還沒識別到,設定settimeout也不行。

有實現總進度條的求推薦。

歪特、snowballpower

使用layui上傳多檔案

html部分 layui form item layui form label 上傳多檔案 label hidden id carfullpicture name carfullpicture style margin left 35px layui upload button class layu...

layui多檔案上傳講解 layui d多檔案上傳

借閱 前端 選擇多檔案 大小狀態操作 刪除開始上傳 js layui.use upload function accept file multiple true auto false bindaction testlistaction choose function obj var files th...

Layui多檔案上傳進度條

html 選擇多檔案 檔名大小 上傳進度 狀態操作 開始上傳 js部分 var files 多檔案列表示例 var demolistview demolist uploadlistins upload.render xhr function index,e data json.stringify p...