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

基本屬性：

directory	是否允許選擇文件夾，默認為false
directoryDrop	是否允許刪除文件夾，默認為false，設置后僅允許你刪除要上傳的文件夾，無法上傳文件
dropZone	初始化，提供拖放文件上傳
enable	是否禁用，默認true，如果要重新設置，使用enable()
multiple	是否能選擇多個文件，默認true，如果設為false，則每次只能選擇一個文件
showFileList	是否要禁用文件列表，默認為true，如果要自定義UI，可以設置為false
template	用於呈現文件列表中的文件模板
files	初始化的時候，在文件列表中呈現的文件，在設置了async時，該選項才可用，顯示上傳成功
validation	驗證，包含三個參數。allowedExtensions(允許的文件類型)、maxFileSize(最大文件大小，以字節為單位)、minFileSize(最小文件大小)
async	異步上傳
localization	局部設置的(我沒有用過)

async：

autoUpload	是否立即上傳，可選的值：true、false     默認為true
batch	是否批量上傳，可選的值：true、false     默認false
chunkSize	設置文件的大小，只有當batch為false時，才可用
concurrent	是否批量上傳，默認：false   只有當chunkSize設置時，該屬性才能用
autoRetryAfter	在多少毫秒之后，重復上傳失敗的文件
maxAutoRetries	上傳失敗時，最大的嘗試次數，設置了autoRetryAfter，才可用
removeField	提交表單域的名稱removeUrl
removeUrl、saveUrl	移除文件的URL地址
removeVerb	移除文件是，HTTP請求的方式(我理解的)，默認：post
saveField	提交表單域的名稱saveUrl，默認是輸入名稱
useArrayBuffer	默認：false   默認情況下，文件作為文件數據上傳。如果設置為true，使用fileReader將文件作為文件緩沖區讀取，此緩沖區在請求正文中發送。fileReader消耗了瀏覽器的內存。如果用戶上傳大文件，可能會消耗客戶端的所有可用內存，甚至可能上傳失敗。
withCredentials	默認為：true  控制是否為跨站點請求發送憑證

 

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