kendoUpload 上传控件

1.带模板的upload，可以根据上传文件类型的不同，来切换对应的icon图标

CSS代码：

.file-icon {
            display: inline-block;
            float: left;
            width: 48px;
            height: 48px;
            margin-left: 10px;
            margin-top: 13.5px;
        }

        .img-file { background-image: url('../../imgs/upload/jpg.png') }
        .doc-file { background-image: url("../../imgs/upload/doc.png") }
        .pdf-file { background-image: url("../../imgs/upload/pdf.png") }
        .xls-file { background-image: url("../../imgs/upload/xls.png") }
        .zip-file { background-image: url("../../imgs/upload/zip.png") }
        .default-file { background-image: url("../../imgs/upload/default.png") }

        #example .file-heading {
            font-family: Arial;
            font-size: 1.1em;
            display: inline-block;
            float: left;
            width: 60%;
            margin: 0 0 0 20px;
            height: 25px;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            overflow:hidden;
            white-space:nowrap;
        }

        #example .file-name-heading {
            font-weight: bold;
            margin-top: 20px;
        }

            #example .file-size-heading {
            font-weight: normal;
            font-style: italic;
        }

        li.k-file div.file-wrapper {
            position: relative;
            height: 75px;
        }
        .k-upload div.k-dropzone{
            text-align: center;
        }

HTML代码：

   <div id="example">
        <div class="demo-section k-content">
            <input type="file" name="files" id="files" />
        </div>
    </div>
    <!-- 模板 -->
    <script id="fileTemplate" type="text/x-kendo-template">
        <span class='k-progress'></span>
        <div class='file-wrapper'>
            <span class='file-icon #=addExtensionClass(files[0].extension)#'></span>
            <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
            <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
            <strong class="k-upload-status">
                <button type='button' class='k-upload-action'></button>
                <button type='button' class='k-upload-action'></button>
            </strong>
        </div>
    </script>

JavaScript代码：

        $("#files").kendoUpload({
                    multiple: true,
                    async: {
                        saveUrl: "save",
                        removeUrl: "remove",
                        autoUpload: false
                    },
                    select:function(e){
                        console.log("Select :: ",e.files);
                    },
                    template: kendo.template($('#fileTemplate').html())
                });   
        function addExtensionClass(extension) {
            switch (extension) {
                case '.jpg':
                case '.img':
                case '.png':
                case '.gif':
                    return "img-file";
                case '.doc':
                case '.docx':
                    return "doc-file";
                case '.xls':
                case '.xlsx':
                    return "xls-file";
                case '.pdf':
                    return "pdf-file";
                case '.zip':
                case '.rar':
                    return "zip-file";
                default:
                    return "default-file";
            }
        }

效果图：

参考地址：https://demos.telerik.com/kendo-ui/upload/index

基本属性：

异步上传：async

autoUpload	是否立即上传，可选的值：true、false 默认为true
batch	是否批量上传，可选的值：true、false 默认false
chunkSize	设置文件的大小，只有当batch为false时，才可用

async: {
     saveUrl: "save",
     removeUrl: "remove",
     autoUpload: true
}

kendoUpload 上传控件

猜你喜欢