easyUI filebox限定文件大小

转载自:https://www.2cto.com/kf/201701/574667.html
侵删
 easyui1.5filebox控件中增加文件大小的验证规则
2017-01-07 09:22:00          来源:a307433749的专栏  
收藏   我要投稿

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$.extend($.fn.validatebox.defaults.rules, {
        // filebox验证文件大小的规则函数
        // 如:validType : ['fileSize[1,"MB"]']
        fileSize : {
            validator : function(value, array) {
                var size = array[0];
                var unit = array[1];
                if (!size || isNaN(size) || size == 0) {
                    $.error('验证文件大小的值不能为 "' + size + '"');
                } else if (!unit) {
                    $.error('请指定验证文件大小的单位');
                }
                var index = -1;
                var unitArr = new Array("bytes", "kb", "mb", "gb", "tb", "pb", "eb", "zb", "yb");
                for (var i = 0; i < unitArr.length; i++) {
                    if (unitArr[i] == unit.toLowerCase()) {
                        index = i;
                        break;
                    }
                }
                if (index == -1) {
                    $.error('请指定正确的验证文件大小的单位:["bytes", "kb", "mb", "gb", "tb", "pb", "eb", "zb", "yb"]');
                }
                // 转换为bytes公式
                var formula = 1;
                while (index > 0) {
                    formula = formula * 1024;
                    index--;
                }
                // this为页面上能看到文件名称的文本框,而非真实的file
                // $(this).next()是file元素
                return $(this).next().get(0).files[0].size < parseFloat(size) * formula;
            },
            message : '文件大小必须小于 {0}{1}'
        }
    });

使用方式:

html:

1
<input name="file" class="easyui-filebox" validType="fileSize:[10,'MB']">

js:

1
2
3
4
5
6
7
8
9
10
$('#file').filebox({ 
        required : true
        width : '300px'
        multiple : true
        validType : ['fileSize[1024,"kb"]' ], 
        buttonText : '请选择'
        buttonAlign : 'right'
        prompt : '请选择一个图片类型的文件'
        accept : [ 'image/jpg', 'image/bmp', 'image/jpeg', 'image/gif', 'image/png'
});
posted @ 2018-12-15 18:23  荒野猛兽  阅读(695)  评论(0编辑  收藏  举报