Question

@(Html.Kendo().Upload()
    .Name("files").Multiple(false)
    .HtmlAttributes(new { @style = "width:100%" })
    .HtmlAttributes(new { accept = ".doc, .docx, .pdf, .ppt, .pptx " }) )

<input type="button" id="btnsubmit"  value="Save"/>

Answer 1

#btnControl:checked ??? html {
    overflow: hidden;
}

<script id="fileTemplate" type="text/x-kendo-template">
    <div class='file-wrapper'>
        <label class="col-sm-1 col-xs-1" style="padding-left:0px!important;">
            <span class='file-icon #=addExtensionClass(files[0].extension)#'></span>
        </label>
        <label class="col-sm-9 col-xs-9"><span class='uploadFileName'>#=name#</span></label>
        <label class="col-sm-9 col-xs-9" style="margin-top:20px;display:none;">
            <input type="text" class="k-textbox"
                   data-val-required="*"
                   style="width:70%"
                   id="txtFileName" name="txtFileName"
                   value="#=name.substring(0, name.lastIndexOf('.'))#" />
            <span class="k-icon k-i-tick fileRenameTick" style="cursor:pointer;" data-extension="#=name.split('.').pop()#"></span>
            <span class="k-icon k-i-close fileRenameTickClose" style="cursor:pointer;"></span>
        </label>
        <div class="col-sm-1 col-xs-1 btnFileRemove" style="padding-right:0px!important;padding-left:0px!important;margin-left:0px!important;width:5%!important;border:0px solid red;">
            <span class='k-icon k-i-close fileRemove'></span>
        </div>
    </div>
</script>

<script>
    var myfile = [];
    $(document).ready(function () {
    });
    var i = 0;
    function onUpload(e) {
        myfile.push(e.files[0]);
    }
    $('#btnsubmit').click(function () {
        var fileRenameList = [];
        var formData = new FormData();
        formData.append("BookBackImage", $("#companyname").val());
        formData.append("BookFrontImage", $("#country").val());

        for (var i = 0; i < myfile.length; i++) {
            alert(myfile.length);
            formData.append("file[" + i + "]", myfile[i].rawFile);
        }
        $('.uploadFileName').each(function () {
            fileRenameList.push($(this).text());
        });
        formData.append("FrontImageRename", JSON.stringify(fileRenameList));

        $.ajax({
            type: "POST",
            url: '@Url.Action("Index","Library")',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
            },
            error: function (error) {
            }
        });
    });
    function addExtensionClass(extension) {
        switch (extension) {
            case '.jpg':
            case '.jpeg':
            case '.img':
            case '.gif':
                return "img-file";
            case '.png':
                return "png-file";
            case '.doc':
            case '.docx':
                return "doc-file";
            case '.ppt':
            case '.pptx':
                return "ppt-file";
            case '.xls':
            case '.xlsx':
                return "xls-file";
            case '.pdf':
                return "pdf-file";
            case '.zip':
            case '.rar':
                return "zip-file";
            default:
                return "default-file";
        }
    }

    $(document).on("click", ".fileRenameTick", function (e) {
        e.preventDefault();
        var inputval = $(this).siblings('input').kendoValidator().data("kendoValidator");
        if (inputval.validate()) {
            var ext = $(this).data("extension");
            var reName = $(this).siblings('input').val() + "." + ext;
            $(this).parent('label').prev('label').children('span').text(reName);
            $(this).parent('label').css("display", "none");
            $(this).parent('label').prev('label').css("display", "inline");
        }
    });
    $(document).on("click", ".fileRenameTickClose", function (e) {
        e.preventDefault();
        $(this).parent('label').css("display", "none");
        $(this).parent('label').prev('label').css("display", "inline");
    });
    $(document).on("click", ".fileRemove", function (e) {
        e.preventDefault();
        $(this).parent('div').parent('div').parent('li').remove();
        var uid = $(this).parent('div').parent('div').parent('li').data("uid");
        $.each(myfile, function (i, el) {
            if (this.uid === uid) {
                myfile.splice(i, 1);
            }
        });
    });
    $(document).on("click", ".uploadFileName", function (e) {
        e.preventDefault();
        var str = $(this).text();
        var rest = str.substring(0, str.lastIndexOf("."));
        $(this).parent('label').next('label').css("display", "inline");
        $(this).parent('label').next('label').children('input').val(rest);
        $(this).parent('label').css("display", "none");

        $(this).parent('label').next('label').children('.field-validation-error').hide();
        $("#txtFileName_validationMessage").hide();
    });
</script>

<style>
    .file-icon {
        display: inline-block;
        float: left;
        width: 48px;
        height: 48px;
        margin-top: 13.5px;
    }

    .lblForMaterialName .file-icon {
        float: left;
        width: 20px;
        height: 20px;
    }

    .img-file {
        background-image: url(../content/web/upload/jpg.png);
    }

    .png-file {
        background-image: url(../content/web/upload/png_converted.png);
    }

    .doc-file {
        background-image: url(../content/web/upload/doc.png);
    }

    .ppt-file {
        background-image: url(../content/web/upload/ppt.png);
    }

    .pdf-file {
        background-image: url(../content/web/upload/pdf.png);
    }

    .xls-file {
        background-image: url(../content/web/upload/xls.png);
    }

    .zip-file {
        background-image: url(../content/web/upload/zip.png);
    }

    .default-file {
        background-image: url(../content/web/upload/default.png);
    }

    .uploadFileName, .uploadBookBackImage, .uploadBookImage, .uploadBookOtherImage {
        cursor: pointer;
        font-size: .9em;
        float: left;
        width: 95%;
        height: 25px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-top: 20px;
        font-weight: normal;
    }
    /*.test{

        float: left;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

    }*/
    li.k-file div.file-wrapper {
        position: relative;
        height: 75px;
    }

    .k-file {
        padding: .5em .0em .0em .5em !important;
    }

    .btnFileRemove {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-left: 0px !important;
        width: 5% !important;
    }
</style>

Answer 2

<form method="post" id="form" action="update.php">
    <label for="control">Control: <input id="control" class="k-checkbox" type="checkbox"/></label>
    <input name="photos" id="photos" type="file"/>
    <input id="send" class="k-button" type="button" value="Save"/>
</form>

现在，用于上传文件的JavaScript：

$("#photos").kendoUpload({
    multiple: false
});

验证表格的功能：

$("#send").on("click", function (e) {

    var ctl = $("#control").is(":checked");
    if (ctl) {
        // if so, send the form
        $("#form").submit();
    } else {
        // otherwise show an alert
        alert("Please check 'control' before sending");
    }
});

如何使用按钮类型输入的kendo文件上传

2 个答案: