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

2021-10-12 15:20:53 字數 1403 閱讀 9508

借閱

前端**

選擇多檔案

大小狀態操作

刪除開始上傳

js **

layui.use('upload', function()'

,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 = $(['

' ,'

''+ (file.size/1014).tofixed(1) +'kb'

等待上傳'

' //             ,'重傳'

,'刪除'

' '].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 值,以免刪除後出現同名檔案不可選

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

if(res.img != ''){

var tr = demolistview.find('tr#upload-'+ index),tds = tr.children();

tds.eq(2).html('上傳成功');

tds.eq(3).html(''); //清空操作

var str = '';

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('上傳失敗');

tds.eq(3).find('.demo-reload').removeclass('layui-hide'); //顯示重傳

使用layui上傳多檔案

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

Layui多檔案上傳進度條

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

Layui 上傳檔案

檔案上傳 layui.upload 最近在做的乙個功能裡,需要在某些條件成立的情況下,才允許上傳檔案。方法一 設定不自動上傳,將上傳事件繫結到另乙個按鈕,選擇完檔案後可以根據條件讓上傳按鈕隱藏和顯示 方法二 設定自動上傳,這時就需要使用before方法或choose方法來判斷條件,但是因為uploa...