ラユイ多ファイルアップロードについて(ここでは画像をアップロードする例)

27480 ワード

多くなくて直接コードを贴ってみんなと分かち合います.
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 onclick="noFile()" type="button" class="layui-btn" id="testListAction">    button>
            div>
jsコードブロック
 //     
    var demoListView = $('#demoList')
    var uploadListIns = upload.render({
        elem: '#testList'
        , url: parent.getApiUrl('system/bus-img/uplodFileBackstage')
        , headers: {'Authorization': token}
        //         
        , size: 31457280
        //         
        , acceptMime: 'image/jpg, image/png'
        , multiple: true
        //      
        , auto: false
        //    
        , bindAction: '#testListAction'
        //      
        , before: function () {
            //    
            var data = {}
            data.busId = compId;
            this.data = data;
        }
        //      
        , allDone: function (obj) {
            //           
            uploadsize = obj.successful;
            //           
            showImg();
            //      
            layer.alert("    ")
        }
        //          
        , choose: function (obj) {
            var files = this.files = obj.pushFile(); //               
            //      
            obj.preview(function (index, file, result) {
                imgIndex = imgIndex + 1
                var len = 5-pendingPicturesNum
                var tr = $(['+ index + '">'
                    , '' + file.name + ''
                    , '' + (file.size / 1014).toFixed(1) + 'kb'
                    , '    '
                    , ''
                    ,''
                    , ''
                    , ''
                    , ''].join(''));
                if (imgIndex > len){
                    layer.msg("     "+len+" ")
                    delete files[index]; //       
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //   input file  ,              
                    return;
                }
                //    
                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  ,              
                    imgIndex = imgIndex - 1
                });

                demoListView.append(tr);
            });
        }
        , done: function (res, index, upload) {
            if (res.respCode == 200) { //    
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('    ');
                tds.eq(3).html(''); //    
                $("#demoList").html('');
                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'); //    
        }
    })

});
function noFile() {
    var content = $("#demoList").html();
    if (content== null || content == 0) {
        layer.alert("     ")
    }
}
コードには既に詳しいコメントがあります.不明な点があればメッセージをください.