asp.net-mvc-3 - Validation using Html.Telerik().Upload() with MVC3

Question

I am looking for sample code that would show how to set validation on the Html.Telerik().Upload() function so that the user can only upload .jpg files. I'd like to support just .jpg files.

Does anyone have any good examples or websites that I could use?

Answer 1

请参阅以下代码。此代码只接受 jpeg/jpg、png 格式的图片。图像大小也限制为 100KB。

@(Html.Telerik().Upload()
        .Name("EmployeeImageUpload")
        .Multiple(false)
        .Async(async => async
        .Save("SaveEmployeeImage", "Employee")
        .AutoUpload(false)
        )
        .ClientEvents(events => events
        .OnLoad("onLoad")
        .OnSelect("onSelect")
        .OnSuccess("onSuccess")
        )
    )


<script type="text/javascript">

    function onLoad(e) {
        $(this).find("input").attr("accept", "image\/jpeg,image\/jpg,image\/png");
    }

    function onSelect(e) {

        if (e.files[0].size > 102400) {
            alert('Image Size Should Be <= 100KB');
            e.preventDefault();
            return false;
        }            

        var ext =e.files[0].extension.toLowerCase();
        if ($.inArray(ext, ['.jpeg', '.jpg', '.png']) == -1) {
            alert('Only Supported Extension are jpeg/jpg, png');
            e.preventDefault();
            return false;
        }
        return true;
    }
</script>

Answer 2

不幸的是，由于浏览器实现<input type="file" />.

资料来源： http ://www.telerik.com/community/forums/aspnet-ajax/upload/how-to-filter-out-unwanted-file-types-radupload.aspx

但是，还有另一种方法可以使用 html 和 javascript：

HTML

<input name="fileToUpload" type="file" onchange="check_file()" >

javascript

function check_file(){
            str=document.getElementById('fileToUpload').value.toUpperCase();
    suffix=".JPG";
    suffix2=".JPEG";
    if(!(str.indexOf(suffix, str.length - suffix.length) !== -1||
                   str.indexOf(suffix2, str.length - suffix2.length) !== -1)){
    alert('File type not allowed,\nAllowed file: *.jpg,*.jpeg');
        document.getElementById('fileToUpload').value='';
    }
}

来源：https ://stackoverflow.com/a/6788623/1304064